层叠上下文（Stacking Context）
层叠上下文（Stacking Context）是HTML中的一个三维概念，它影响着元素的堆叠顺序和显示效果。如果一个元素具备以下任何一个条件，就会创建一个新的层叠上下文：
- 根元素（<html>元素，初始的层叠上下文）
- 使用定位属性：将元素的定位属性设置为相对定位（position:relative）、绝对定位（position:absolute）或固定定位（position:fixed），这样可以创建新的层叠上下文。
- 使用浮动属性：将元素的浮动属性设置为float:left或float:right，也可以创建新的层叠上下文。
- 使用透明度属性：将元素的透明度设置为小于1的值，也可以创建新的层叠上下文。
层叠上下文的特性包括：
- 层叠上下文的层叠水平要比普通元素高。
- 层叠上下文可以阻断元素的混合模式。
- 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的“层叠上下文”。
- 每个层叠上下文和兄弟元素独立，也就是说，当进行层叠变化或渲染的时候，只需要考虑后代元素。
- 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。
在同一个层叠上下文中，元素的堆叠顺序由层叠级别决定，层叠级别从低到高排列如下：
- 边框和背景：也就是当前层叠上下文的边框和背景。
- 负z-index：z-index为负值的“内部元素”。
- 行内盒子：普通文档流下的行内盒子。
- 正z-index：z-index为正值的“内部元素”。
在同一层叠上下文中，如果两个元素的层叠级别相同，则后面的元素在前面的元素的上面，遵循后来者居上的原则。在不同的层叠上下文中，我们比较的是“父级元素层叠级别”。
包含块（Containing Block）
这是一个元素在布局上的父级元素。
元素的定位（top、right、bottom、left 和 position 属性）是相对于其包含块的。包含块通常是块级元素或行内块元素，但也可以是其他定位元素（如 position: relative 或 position: absolute 的元素）。
层叠上下文（Stacking Context）和包含块（Containing Block）的关系
这两个概念之间的关系在于，层叠上下文和包含块在很大程度上影响着元素的定位和堆叠。一个元素的包含块会决定它的布局位置，而其层叠上下文则会决定它在页面上的堆叠顺序。例如，一个绝对定位的元素会脱离正常的文档流，并相对于其最近的非 static 定位祖先元素（即包含块）进行定位。同时，这个元素的层叠上下文由其 z-index 属性和其祖先元素的 z-index 属性共同决定。
分层
复杂的 3D 变换、页面滚动，或者使用 z-indexing 做 z 轴排序等，为了更加方便地实现这些效果，渲染引擎还需要为特定的节点生成专用的图层，并生成一棵对应的图层树（LayerTree）。
渲染步骤中就提到了GPU合成composite概念。
浏览器渲染的图层一般包含两大类：渲染图层（普通图层）以及复合图层
渲染图层：是页面普通的文档流。无论添加多少元素，还在在同一个默认复合层。
虽然绝对定位（absolute），相对定位（fixed），浮动定位（float）会让元素成为脱离文档流，但它仍然属于默认复合层，共用同一个绘图上下文对象（GraphicsContext）。
复合图层，又称图形层。它会单独分配系统资源，每个复合图层都有一个独立的GraphicsContext。（当然也会脱离普通文档流，这样一来，不管这个复合图层中怎么变化，也不会影响
默认复合层里的回流Reflow重绘Repaint）
并不是布局树的每个节点都包含一个图层，如果一个节点没有对应的层，那么这个节点就从属于父节点的图层。
第一点，拥有层叠上下文属性的元素会被提升为单独的一层。postion、z-index、filter、opacity
第二点，需要剪裁（clip）的地方也会被创建为图层。
可以看看这篇文章 浏览器渲染图层VS复合图层（硬件加速） | 码农家园
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
