不得不承认之前对于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">
我是父亲 &nbsp;我是父亲 &nbsp; 我是父亲 &nbsp;我是父亲 &nbsp;
我是父亲 &nbsp; 我是父亲 &nbsp; 我是父亲 &nbsp;我是父亲
<div class="static-div">
    我是static &nbsp;我是static &nbsp;我是static &nbsp;我是static
    我是static &nbsp;我是static &nbsp;我是static &nbsp;我是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脱离文档流因此不占用位置
呈现此时的布局

                                                    ------终-------