CSS position属性

CSS中 postion 是一个常用的属性，position 有几个属性值：static、relative、absolute、fixed。每个属性都有一定的特点，掌握了这些特点才能正确使用 position 属性。

1.static

属性默认值，对象遵循正常文档流，top,bottom,left,right,z-index没有作用。

2.relative

相对位置布局，对象遵循正常文档流，占据正常文档流的位置，但是根据top,bottom,left,right参数相对于正常位置相对偏移，就像是你坐火车去上厕所，虽然你离开了你原先的座位，但是你的座位本身还是占据空间的。相对位置布局的元素之间的层叠关系通过z-index属性定义。
如果设置postion如下：

position: relative;
left: 20px;
top: 20px;

效果如下图：

relative位置布局

其中红色虚线是不设置position为relative时的位置，红色实现区域是按上面代码设置position属性值为relative，并且left和top属性都为20px的结果，从上述结果中我们可以看到，偏移是相对其正常文档流中的位置进行偏移的。

3.absolute

absolute，意味着“绝对”，可absolute的用法却一点也不“绝对”，还是这个意思，理解的有偏差？不管怎样，absolute的规则是确定的：

具有absolute属性的块元素，会向上一层一层寻找position不是static的第一个父元素，直到父元素为止，如果存在这样的父元素，left,top,right,bottom所设置的偏移量就是其相对于找到的父元素的偏移量，如果没有，设置的偏移量以浏览器的左上角为基准。

如下代码中，拥有absolute属性的块元素，其父元素position属性值都是static，按照规则，其相对位置应该是相对于浏览器左上角。

    parent div
    

        absolute div
    

效果图（红色框代表html区域，蓝色框代表body区域）：

相对浏览器左上角偏移

如果body属性设置position:relative，会出现什么结果呢？

相对于body偏移

所以，你肯定也就知道了，下面这种效果怎么实现了吧

相对于其他父元素偏移

上述效果代码：

.parent{
        margin: 10px 0px;
        width: 400px;
        height: 300px;
        background-color: pink;
        color: white;
        position: relative; /*设置父元素的postion值为非static*/
    }
    .child{
        width: 200px;
        height: 60px;
        background-color: #5bc0de;
        color: white;
        position: absolute;
        box-sizing: border-box;
        padding: 20px;
        left: 400px; /*设置偏移距离*/
        top: 0px;
        box-shadow: 0px 8px 16px rgba(0,0,0,0.18);
    }

4.fixed

fixed很简单，脱离文档流，相对浏览器窗口定位，即使页面内容滚动，fixed区域位置不会跟着变动。z-index确定层叠关系。

参考博客：CSS中position属性( absolute | relative | static | fixed )详解