position 定位 #74

wl05 · 2019-11-27T14:23:54Z

position定位

四个取值：

static(默认值)
relative
absolute
fixed

废话少说上代码：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        .hello {
            width: 200px;
            height: 200px;
            left: 100px;
            top: 100px;
            background-color: red;
        }

        .world {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="hello">

</div>

<div class="world"></div>
</body>
</html>

一个一个来:

1. static 默认值运行代码，就是static的效果了

2. relative

   .hello {
        position:relative;
        width:200px;
        height:200px;
        left:100px;
        top:100px;
        background-color:red;
    }

设置position:relative;效果：

解释一波：
红框top、left移动了100px。蓝框不动，这儿不动说明一个问题，红框的位置还在它没有脱离文档流，脱离了蓝框就该往上跑了，知识点理解一下。还有就是红框的移动是相对于它移动之前的位置进行移动的。

3. absolute

.hello {
    position:absolute;
    width:200px;
    height:200px;
    left:100px;
    top:100px;
    background-color:red;
}

看图说话：

很直观是蓝框往上跑了，说明红框那个位置已经不在了。

再举个栗子,修改代码

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        .hello {
            position: relative;
            width: 200px;
            height: 200px;
            left: 100px;
            top: 100px;
            background-color: red;
        }

        .world {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: blue;
            top: 100px
        }
    </style>
</head>
<body>
<div class="hello">
    <div class="world"></div>
</div>

</body>
</html>

看图说话

总结一波：

一个元素position设置absolute时，这个元素的位置就是以他父代元素position不为static的元素作为参考，如果他的祖先元素position都是static那就以html元素作为参考。刚刚红色方块的情况就是他父代元素没有position不为static的元素，就以html元素为参考

4. fixed

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        body {
            height: 10000px;
        }

        .hello {
            position: relative;
            width: 200px;
            height: 200px;
            left: 100px;
            top: 100px;
            background-color: red;
        }

        .world {
            position: fixed;
            width: 100px;
            height: 100px;
            background-color: blue;
            top: 0
        }
    </style>
</head>
<body>
<div class="hello">
    <div class="world"></div>
</div>

</body>
</html>

看图说话：

运行代码可以随便滚动一下，如果说absolute还受到relative的限制，那么fixed就是无法无天，脱离文档流，就不动。

（完）

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

position 定位 #74

position 定位 #74

wl05 commented Nov 27, 2019

position 定位 #74

position 定位 #74

Comments

wl05 commented Nov 27, 2019

position定位

1. static 默认值运行代码，就是static的效果了

2. relative

3. absolute

4. fixed