CSS 层叠上下文的创建条件
- 根元素（
<html>）：文档的根元素天生具有层叠上下文，它是整个文档层叠上下文的基础。
- 设置了
position为absolute或relative且z - index不是auto的元素：当元素设置了相对或绝对定位，并且显式指定了z - index值（非auto）时，该元素会创建一个新的层叠上下文。例如：
.element {
position: relative;
z - index: 1;
}
- 设置了
position为fixed或sticky的元素：无论z - index的值如何（即使是默认的auto），固定定位和粘性定位的元素都会创建新的层叠上下文。例如：
.fixed - element {
position: fixed;
}
- 元素的
opacity值小于1：当元素的opacity小于1（例如opacity: 0.8）时，它会创建一个层叠上下文。这使得该元素及其子元素在透明度相关的层叠上有独立的上下文。
- 元素的
transform值不是none：如果元素应用了transform属性且值不是none（如transform: scale(1.2)），则会创建层叠上下文。这在处理元素的变形效果时，确保其在层叠顺序上的独立性。
filter值不是none：类似transform，当元素的filter属性值不是none（例如filter: blur(5px)）时，会创建层叠上下文，影响元素在层叠中的位置。will - change指定了上述属性：当will - change指定了如opacity、transform等会创建层叠上下文的属性时，也会提前创建层叠上下文。例如：
.element {
will - change: transform;
}
display为flex或grid的父元素，且子元素设置了z - index：如果父元素是display: flex或display: grid布局，且子元素设置了z - index（非auto），则父元素会创建层叠上下文。例如：
.flex - container {
display: flex;
}
.flex - item {
z - index: 1;
}
display为inline - flex或inline - grid的元素：类似于flex和grid，inline - flex和inline - grid元素也能创建层叠上下文。
层叠顺序的具体规则
- 背景和边框：处于层叠顺序的最底层，属于创建层叠上下文元素的背景和边框。例如，一个
<div>元素的背景颜色和边框会在其内容和子元素之下显示。
- 负
z - index的子元素：具有负z - index值的子元素会在创建层叠上下文元素的背景和边框之上，但在其他常规内容之下。例如：
.parent {
position: relative;
}
.child - negative - z {
position: relative;
z - index: -1;
}
- 块级盒：常规的块级元素，没有设置
z - index（即z - index: auto），按照文档流顺序层叠，后来的块级元素会覆盖前面的。
- 浮动盒：浮动元素（
float属性不为none）在块级元素之上，但在设置了z - index的元素之下（如果有的话）。
- 行内盒：行内元素在浮动元素和块级元素之上，同样按照文档流顺序层叠。
z - index为0或auto的层叠上下文元素：这些元素在常规内容（块级、浮动、行内）之上，但在正z - index的层叠上下文元素之下。- 正
z - index的子元素：具有正z - index值的子元素会在创建层叠上下文元素的其他内容之上，值越大越在上面。例如：
.parent {
position: relative;
}
.child - positive - z {
position: relative;
z - index: 10;
}
避免因层叠问题导致元素显示异常的方法
- 明确层叠上下文和
z - index：在布局复杂页面时，清晰地规划每个元素所属的层叠上下文，并合理设置z - index值。避免无意中创建过多不必要的层叠上下文，导致层叠关系混乱。例如，在导航栏和弹窗的设计中，确保弹窗的z - index足够大以覆盖导航栏。
- 使用工具辅助：借助浏览器的开发者工具，如Chrome DevTools的层叠视图，直观地查看元素的层叠顺序和层叠上下文关系。这有助于快速定位和解决层叠问题，理解页面元素的显示层级。
- 遵循设计原则：在设计页面布局时，遵循一定的设计规范和原则。例如，将重要的交互元素（如按钮、弹窗）置于较高的层叠顺序，避免被其他元素遮挡。同时，考虑不同屏幕尺寸和设备上的层叠效果，进行全面的测试。
- 模块化和分层设计：将页面划分为不同的功能模块，并为每个模块设计独立的层叠结构。这样可以减少模块之间层叠的相互干扰，使代码更易于维护和理解。例如，将广告模块、内容模块和导航模块分层设计，避免广告遮挡重要内容。
- 避免过度使用
z - index：尽量通过文档流和布局方式来控制元素的显示顺序，仅在必要时使用z - index。过度使用z - index可能导致层叠关系难以预测和维护。例如，可以通过position的不同值（如relative和absolute）来调整元素位置，而不是一开始就依赖z - index。
