CSS 定位属性小记

CSS position 属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。

该属性的可选值有 5 个，分别是：

• static：默认值，静态定位
• relative：相对定位
• absolute：绝对定位
• fixed：固定定位
• sticky：粘性定位

通过设置非 static 的值，可以将一个 HTML 元素变为定位元素（postioned element）。

static 静态定位

非定位元素都采用静态定位，按照标准文档流排布。

对于静态定位的元素，设置 left，right，top 和 buttom 不起作用。

relative 相对定位

元素依然按照标准文档流排布，相对元素自己原来的位置进行定位，通过属性 left、right、top 和 right 设置偏移位置的大小。

相对定位有两个使用场景，一是进行元素位置的微调，二是为绝对定位的元素提供参照物。

absolute 绝对定位

使用绝对定位的元素，脱离了标准文档流。

绝对定位的元素的参照物是最近的非 static 定位的元素，也就是最近的定位元素。如果找不到，会将视口作为参照物。

通常在使用绝对定位时，会给它的父元素设置一个 postion: relative 样式，让父元素为相对定位，子元素为绝对定位，称为“子绝父相”。

fixed 固定定位

固定定位的元素脱离了标准文档流。

固定定位的参照物是视口。当页面滚动时，固定定位的元素会保持位置不变。

固定定位适合一些元素相对窗口固定的场景，比如页面侧边的工具按钮，比如页面底部的返回顶部按钮，比如页面居中的弹窗等。

sticky 粘性定位

粘性定位是 CSS 后来推出的一个定位种类，非常好用。

粘性定位可以看作是相对定位和固定定位的一个结合体。

当粘性定位元素在在目标区域以内，它表现的像是 relative 定位；在页面滚动过程中，当其距离父元素的距离达到 sticky 粘性定位设置的距离时，又表现的像是 fixed 定位，固定到此位置不再变化。

页面中的头部导航通常会使用这种定位，方便用户下拉很远之后，依然能快速使用头部的菜单等功能。

z-index 属性

该属性仅对定位元素生效，即设置了上述 relative、absolute、fixed 和 sticky 定位的元素起作用。

因为定位元素之间可能发生位置的重叠，产生遮挡，通过 z-index 属性可以设置定位元素的层叠顺序，决定谁在上显示

z-index 属性可以被设定为关键词 auto或 一个整数。

当设置为 auto 时，表示不会创建一个层叠上下文。当前层叠上下文中生成的盒子的堆叠层级和父级盒子相同。

当多个定位盒子发生层叠时，如果处于同一个层叠上下文：

• 数值大的表示层级高，会显示在上面；

• 数值相等的，则后面的元素的会显示在上面

如果不处于同一个层叠上下文：

• 向上找到属于同一个层叠上下文的元素，以此为标准比较