定位和层叠上下文

[mbaxszy7]

总结一下CSS中的定位和层叠上下文

定位

• fixed固定定位
  固定定位让元素相对视口定位，此时视口被称作元素的包含块（containing block）。

• absolute绝对定位
  绝对定位不是相对视口，而是相对最近 的祖先定位元素。如果祖先元素都没有定位， 那么绝对定位的元素会基于初始包含块（initial containing block）来定位。 初始包含块跟视口一样大，固定在网页的顶部。

• relative相对定位
  相对定位的元素以及它周围的所有元素，都还保持着原来的位置。

• sticky定位
  它是相对定位和固定定位的结合体：正常情况下，元素会随着页面滚动，当到达屏幕的特定位置时，如果用户继续滚动，它就会 “锁定”在这个位置。

层叠上下文

理解层叠上下文

一个层叠上下文包含一个元素或者由浏览器一起绘制的一组元素。其中一个元素会作为层叠 上下文的根，比如给一个定位元素加上 z-index 的时候，它就变成了一个新的层叠上下文的根。 所有后代元素就是这个层叠上下文的一部分。

创建层叠上下文

1. 文档根节点 （ html）会给整个页面创建一个顶级的层叠上下文
2. 给一个定位元素加z-index属性
3. CSS3的几个新属性： 小于 1 的 opacity 属性，不为none的transform 属性、 不为none的filter 属性， will-change为opacity、transform、filter中的一个

层叠上下文和 z-index

1. z-index 只在定位元素上生效，不能用它控制静态元素
2. 给一个定位元素加上 z-index 可以创建层叠上下文

在一个独立的层叠上下文中，元素如何排列？

由下到上：
1. 层叠上下文的根元素
2. z-index为负值的已定位元素（包括它们的子元素 ）
3. 未定位元素
     1. block块级元素
     2. float浮动元素
     3. inline/inline-block元素
4. z-index为auto/0的已定位元素（包括它们的子元素）
5. z-index为正值的已定位元素（包括它们的子元素）

CSS in Depth
张鑫旭-《深入理解CSS中的层叠上下文和层叠顺序》