Position

定义

position 属性规定元素的定位类型。position 具有五个值:

1. absolute 绝对定位，相对于 static 定位以外的第一个父元素进行定位。
2. fixed 绝对定位，相对于浏览器窗口进行定位。
3. relative 相对定位，相对于其现在的位置进行定位。
4. static 默认值，不进行定位。
5. inherit 从父元素继承 position 属性的值。

注意: IE 浏览器都不支持 inherit 这个属性。

绝对定位 absolute

绝对定位是相对于元素最近的已定位的父级元素。如果没有已定位的父级元素，那么它会一直往更上级寻找，直到最顶层 body。
绝对定位一但设置，就会脱离文档流。同时文档里就会将该元素的位置删除。所以该元素会覆盖在其他元素上，可以通过设置 z-index 属性来控制元素的层级。

注意: absolute 会改变 display 的类型。当元素设置了绝对定位时，该元素将具有 display:inline-block 的属性，可以设置长宽，宽度不占满父元素。

相对定位 relative

相对定位是相对于它本身在文档流的位置进行定位移动的，同时文档流保留了它原来的位置，会占据其他元素的位置。

Fixed 定位

fixed 定位的元素将相对于屏幕视口的位置定位。并且元素的位置不会在屏幕滚动时改变。同时 fixed 在某些情况下将失效，MDN 有说明

当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。

此篇文章有详细说明 https://www.imooc.com/article/67784