《五》CSS 中的 position 属性

堆叠顺序属性 z-index：设置元素的堆叠顺序(设置一个定位元素沿 z 轴的位置)。属性值是一个没有单位的整数，可以为负数。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的上面。

z-index 只有在 position 为 relative | absolute | fixed | sticky 时才生效。
当父元素设置了 z-index 后，其子元素所设置的 z-index 都将在父元素内进行排列，这种情况下的子元素无论如何不会与父元素外部其他元素出现渲染层次交叉的情况。

img{
    position: absolute;
    left: 100px;
    top: 100px;
    z-index: -1;
}

普通定位 static：

普通定位就是从上到下、从左到右依次排布的布局。

普通流中元素的位置由元素在 HTML 中的位置决定，除非专门指定，否则所有框都在普通流中定位。

top、bottom、left、right、z-index 都失效。

语法：

position: static;

相对定位 relative：

元素相对于它在普通流中的位置进行定位。

如果对一个元素进行相对定位，它将出现在它原本所在的位置上；然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。相对定位不脱离文档流，仍然占据原本所在的文档空间；移动后的元素会覆盖页面上的其他元素。

例如相对定位使得原本在第二行的元素 div 上浮了一行的高度，则他会和本来在第一行的元素叠加，但是他在第二行的位置还是会空在那里，下一个块级元素会从第三行开始布局。

语法为：

position: relative;
left、right、top、bottom: x; // left 向右移动 x；right 向左移动 x；top 向下移动 x；bottom 向上移动 x。值可以为负数，即往规定方向的相反移动

绝对定位 absolute：

相对于最近的一个已经定位的祖先元素进行定位，如果没有最近定位的祖先元素，则根据根元素进行定位。

绝对定位脱离文档流，不占据原本所在的空间；移动后的元素会覆盖页面上的其他元素。

语法为：

position: absolute;
left、right、top、bottom: x; // left 向右移动 x；right 向左移动 x；top 向下移动 x；bottom 向上移动 x。值可以为负数，即往规定方向的相反移动

固定定位 fixed：

根据浏览器窗口进行定位（拉动页面时，元素位置不动）。

脱离文档流，可以覆盖页面上的其他元素。

语法为：

position: fixed;
left、right、top、bottom: x; // left 向右移动 x；right 向左移动 x；top 向下移动 x；bottom 向上移动 x。值可以为负数，即往规定方向的相反移动

粘性定位 sticky：

基于用户的滚动位置来定位。

粘性定位的元素依赖于用户的滚动，在 position:relative 与 position:fixed 之间切换，在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top、 right、bottom 或 left 之一。

目前浏览器的支持度不好。

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}