什么是 z-index？
在 CSS 中，z-index 属性用于控制元素在层叠上下文（stacking context）中的显示顺序，也就是所谓的“层次”或“叠层次序”。
当多个元素重叠在一起时，z-index 属性会决定哪个元素位于上方，哪个元素位于下方。z-index 取值越大的元素，就越可能出现在上方。
什么是层叠上下文？
层叠上下文是一种 HTML 元素渲染顺序的方法，并且这种顺序是可以被修改的。当一个元素成为一个层叠上下文的根元素之后，它的所有子元素都位于这个上下文中，并且它们的层叠关系也就以这个根元素为准了。
对于非定位元素（static），它们的 z-index 不会影响层叠上下文。只有创建了新的层叠上下文的元素，才会影响其他元素的 z-index。
比较常见的创建层叠上下文的如下：
- position: absolute/fixed/relative（z-index 属性只对定位元素有效）
- opacity 属性小于 1 的元素（opacity 属性小于 1 会创建新的层叠上下文）
- iframe 元素
- z-index 值不为 auto 的 flex 元素
- transform 属性非 none 的元素
- mix-blend-mode 属性非 normal 的元素
- filter 属性非 none 的元素
- perspective 属性不为 none 的元素
- isolation 属性为 isolate 的元素
- position: sticky 的元素
z-index 叠层问题
由于创建层叠上下文的元素会对层叠顺序产生影响，导致 z-index 叠层问题时常出现：
---- ---------------- ---- ------------------- ---- ------------------ ------ -------- - --------- --------- - ----- - --------- --------- ---- -- ----- -- ------ ------ ------- ------ ----------------- ----- - ---- - --------- --------- ---- ------ ----- ------ ------ ------ ------- ------ ----------------- ---- -------- -- -
以上的代码中，我们将一个蓝色块和一个红色块都放在了一个相对定位的父元素中。由于 red 元素的 z-index 更高，所以看起来它应该出现在蓝色元素的上方。然而，由于 blue 元素也创建了层叠上下文，它就拥有了一个默认的 z-index 值（也就是 0），所以在这种情况下，蓝色元素依然出现在了红色元素的上方。
解决问题
为了解决这个问题，我们需要在 CSS 中重置重要属性的默认值，以使所有元素在 z-index 层叠时都具有一致的基准点。这就是 CSS Reset。
经过 CSS Reset 处理后，全部 HTML 元素的默认属性将被统一重置，而不需要担心浏览器之间的差异和变化。以下是一个 CSS Reset 基础代码示例：
-- ----- --- ---- -------- -- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ----- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- ----- -------- ----- ------------ ------- ----------- ------- ---------- ----- ------------ -------- --------------- --------- ------ -------- ----------- ------------ -
通过在 CSS 中使用一个彻底的 Reset 来将浏览器默认样式和目标样式之间的数值差距置于一致的基础上，就能快速解决层叠问题。
结论
层叠问题对于设计自然、不受限制的页面布局来说非常棘手。所以学习如何使用 CSS Reset 解决 z-index 层次问题是非常有价值的前端技能。通过这篇文章提供的详细指导，我们相信您已经掌握了如何正确地处理这种情况。
希望您在今后的前端工作中能够使用到这些技术，为您的页面添加强大的层叠化设计效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66f93906c5c563ced5c3dbc9