position 用于指定一个元素在文档中的定位方式。
| 属性值 | 说明 |
|---|---|
static | 默认值。没有定位，元素出现在正常的文档流中（忽略 top、bottom、left、right 和 z-index 声明）。 |
absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素 进行定位，如果父级不是，会一直往上到 body，脱离文档流。 |
fixed | 生成固定定位的元素，相对于 浏览器窗口 进行定位，脱离文档流。（老 IE 不支持） |
relative | 生成相对定位的元素，相对于 其正常位置 进行定位，不脱离文档流。 |
sticky | 粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。 主要用于 scroll 事件的监听上。详情 |
unset |
absolute的containing block容器块计算方式跟正常流有什么不同？
无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：
inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box （除 margin 和 border 外的区域）的最小矩形；padding box 构成。如果都找不到，则为 initial containing block。
补充：
static（默认的）/ relative：简单说就是它的父元素的内容框（即去掉 padding 的部分）absolute: 向上找最近的定位为 absolute/relative 的元素fixed: 它的 containing block 一律为根元素（html/body），根元素也是 initial containing block当把元素 position 属性设置为 absolute 或 fixed 的时候，会发生三件事：
display: block（给一个内联元素，如 <span>，设置 absolute 之后发现它可以设置宽高了）；width: 100%（占据一行），变为了 auto。position: sticky 的生效具有一定的条件限制：
top、right、bottom 或 left 之一，换言之，指定 top、right、bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同top 和 bottom 同时设置时，top 生效的优先级高；left 和 right 同时设置时，left 的优先级高。relative 还是 fixed 是根据元素是否达到设定了的阈值决定的position: sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。第四点需要特别解释一下：
position:sticky 元素的任意父节点定位设置为 overflow: hidden，则父容器无法进行滚动，所以 position: sticky 元素也不会有滚动然后固定的情况。position:sticky 元素的任意父节点定位设置为 position: relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewprot 定位。文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
可以通过滑动示例窗口查看效果
不设置 position 属性的值，top/right/bottom/left 不会生效，但是设置了 position: static 也不会生效。
z-index 用户定义一个元素在文档中的层叠顺序，数值越大层级最大。
使用相对性：z-index 值只决定 同一父元素中的同级子元素 的堆叠顺序。父元素的 z-index 值（如果有）为子元素定义了堆叠顺序（CSS 版堆叠「拼爹」）。
向上追溯找不到含有 z-index 值的父元素的情况下，则可以视为自由的 z-index 元素，它可以与父元素的同级兄弟定位元素或其他自由的定位元素来比较 z-index 的值，决定其堆叠顺序。同级元素的 z-index 值如果相同，则堆叠顺序由元素在文档中的先后位置决定，后出现的会在上面。所以如果当你发现一个 z-index 值较大的元素被值较小的元素遮挡了，请先检查它们之间的 DOM 结点关系，多半是因为其父结点含有激活并设置了 z-index 值的 position 定位元素。
注意事项：
position 属性值必须为 absolute、relative 或 fixed等非 static 元素上z-index 值很小，无论子节点的 z-index 值多大，其层级仍然很小z-index 值，或者值相同，谁在 HTML 后面，谁的层叠行就更高z-index 属性在下列情况下会失效：
position 为 relative 时，子元素的 z-index 失效解决：父元素 position 改为 absolute 或 static
position 属性为非 static 属性解决：设置该元素的 position 属性为 relative、absolute 或是 fixed 中的一种
z-index 的同时还设置了 float 浮动解决：float 去除，改为 display：inline-block