Review
- 2024-12-06 13:30
[!Summary]
一、Introduction #
堆叠上下文（stacking context）堆叠上下文是一个区域，在这个区域中，子元素按照特定的规则进行叠放。决定了元素在 z 轴上的显示顺序，即哪个元素会覆盖哪个元素。
任何满足以下条件之一的元素都会创建一个新的堆叠上下文：
- 根元素：HTML 的根元素
<html>本身就创建一个堆叠上下文。 - 定位元素：具有
position属性值为absolute、relative、fixed或sticky的元素。 - Flex容器：具有
display属性值为flex或inline-flex的元素。 - Grid容器：具有
display属性值为grid或inline-grid的元素。 - 具有
z-index值不为auto的元素：即使元素没有定位，只要设置了z-index值，也会创建一个堆叠上下文。 opacity属性值小于 1 的元素：具有透明度的元素也会创建一个堆叠上下文。transform属性不为none的元素：应用了变换的元素也会创建一个堆叠上下文。filter属性不为none的元素：应用了滤镜的元素也会创建一个堆叠上下文。isolation属性值为isolate的元素：显式地创建一个堆叠上下文。will-change属性指定了任何会创建堆叠上下文的属性：例如，will-change: transform。contain属性值为layout、paint或strict的元素：这些值会限制元素及其子元素的某些属性，从而创建一个新的堆叠上下文。
复合层与堆叠上下文：
- 复合层：为了优化渲染性能，浏览器会将页面分成多个图层，每个图层称为复合层。当一个元素的属性发生变化时，浏览器只需要更新对应的复合层，而不需要重新渲染整个页面。
- 堆叠上下文：堆叠上下文是HTML元素的一个概念，它决定了元素如何与页面上的其他元素进行叠放。当一个元素创建了一个堆叠上下文时，它就成为了一个独立的容器，其子元素的定位就会相对于这个容器进行。
position: fixed 的特殊性：
- 一般情况下：position: fixed 元素会相对于浏览器窗口进行定位，即使页面滚动，它的位置也不会改变。
- 特殊情况：
- 祖先元素创建了堆叠上下文：如果一个 position: fixed 元素的祖先元素创建了一个堆叠上下文，且这个堆叠上下文触发了硬件加速，那么这个 fixed 元素就会相对于这个祖先元素进行定位。
- 触发硬件加速的属性：常见的触发硬件加速的属性包括
transform,opacity,filter,will-change等。