层叠上下文：页面渲染的幕后推手

前端

2023-09-27 07:50:58

在页面渲染的过程中，有一个非常重要的概念，叫做层叠上下文。理解层叠上下文对于理解页面渲染的机制至关重要，它可以帮助我们更好地控制元素在页面中的显示顺序。

什么是层叠上下文？

层叠上下文是文档或其一部分的某个特定区域，在这个区域内，元素的层叠顺序（即z轴上的前后顺序）由该区域内的规则决定，不受外部元素的影响。换句话说，层叠上下文是一个独立的渲染环境，在其内部，元素的层叠顺序不受外部元素的z-index属性影响。

层叠上下文的建立条件

以下情况会创建新的层叠上下文：

根元素 (<html>)
元素具有 position: absolute 或 position: fixed 的定位属性
元素具有 transform、filter、will-change 或 contain 等属性
元素具有 overflow: hidden 或 overflow: scroll 的溢出属性

层叠顺序

在同一层叠上下文中，元素的层叠顺序由以下规则决定：

z-index 属性：具有更高 z-index 值的元素会位于前面。
定位类型：position: fixed > position: absolute > position: relative > position: static。具有更高级定位类型的元素会位于前面。
文档顺序：在没有 z-index 和定位属性的情况下，文档中出现的第一个元素会位于前面。

层叠上下文的应用

理解层叠上下文可以帮助我们解决以下问题：

控制元素的前后顺序
创建浮动元素
定位元素
优化页面布局和视觉效果

示例

下面是一个简单的示例，展示了层叠上下文的作用：

<div style="position: absolute; left: 100px; top: 100px; z-index: 1;">元素 1</div>
<div style="position: absolute; left: 150px; top: 150px; z-index: 2;">元素 2</div>
<div style="position: absolute; left: 200px; top: 200px; z-index: 1;">元素 3</div>