不得不承认之前对于position的认识真是太肤浅了，以下的这个例子一定会刷新你的认知~
CSS position属性
| ❤名称 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。（非常重要）元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。 |
| sticky | position:relative和position:fixed的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed |
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
|inherit| 规定应该从父元素继承 position 属性的值。
且看下面的例子
html
<div class="parent">
我是父亲 我是父亲 我是父亲 我是父亲
我是父亲 我是父亲 我是父亲 我是父亲
<div class="static-div">
我是static 我是static 我是static 我是static
我是static 我是static 我是static 我是static
<div class="absolute-div">
我是absolute
</div>
</div>
</div>
css
.parent {
z-index: 111;
position: relative;
top: 20px;
left: 500px;
height: 100px;
width: 300px;
background-color: blueviolet;
}
.static-div {
position: static;
width: 300px;
height: 100px;
background-color: yellow;
}
.absolute-div {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 300px;
background-color: aqua;
}
效果图
html渲染效果
来说说为啥？？？
首先absolute是相对于除去static之外的第一个父元素进行定位，因此针对紫色parent定位，而非整个body
其次注意static的位置，是处于正常文档流中的位置，为parent的子元素因此顺次向下排
而孙子辈的absolute-div脱离文档流因此不占用位置
呈现此时的布局
------终-------
