背景
在前端开发中，我们经常会使用 CSS Reset 来消除浏览器默认样式，以保证网页在不同浏览器下的一致性。然而，使用 CSS Reset 后，有时候会发现 z-index 属性失效的情况，这是由于 CSS Reset 重置了元素的层叠上下文导致的。
什么是层叠上下文
层叠上下文是 CSS 中用来处理元素层叠顺序的概念。每个元素都有一个层叠上下文，它决定了元素在层叠顺序中的位置。当一个元素的层叠上下文改变时，它的层叠顺序也会改变。
CSS Reset 对层叠上下文的影响
CSS Reset 会重置元素的层叠上下文，导致元素的层叠顺序发生变化。具体来说，CSS Reset 会给元素设置一个默认的层叠上下文，这个层叠上下文不同于浏览器默认的层叠上下文，因此会影响元素的层叠顺序。
解决方案
解决 CSS Reset 后 z-index 失效的问题，需要重新设置元素的层叠上下文。具体来说，有以下几种方法：
1. 给元素设置 position 属性
给元素设置 position 属性可以创建一个新的层叠上下文。例如，给一个元素设置 position: relative; 就可以创建一个新的层叠上下文，从而保证 z-index 属性的有效性。
-- -------------------- ---- ------- ---- --------------- ---- --------------------- ---- --------------------- ------ ------- ------- - --------- --------- - ------- - -------- -- - ------- - -------- -- - --------
2. 给元素设置 transform 属性
给元素设置 transform 属性也可以创建一个新的层叠上下文。例如，给一个元素设置 transform: translateZ(0); 就可以创建一个新的层叠上下文，从而保证 z-index 属性的有效性。
-- -------------------- ---- ------- ---- --------------- ---- --------------------- ---- --------------------- ------ ------- ------- - ---------- -------------- - ------- - -------- -- - ------- - -------- -- - --------
3. 给元素设置 opacity 属性
给元素设置 opacity 属性也可以创建一个新的层叠上下文。例如，给一个元素设置 opacity: 0.99; 就可以创建一个新的层叠上下文，从而保证 z-index 属性的有效性。
-- -------------------- ---- ------- ---- --------------- ---- --------------------- ---- --------------------- ------ ------- ------- - -------- ----- - ------- - -------- -- - ------- - -------- -- - --------
总结
CSS Reset 可以帮助我们消除浏览器默认样式，提高网页的一致性。然而，它也会影响元素的层叠顺序，导致 z-index 属性失效。为了解决这个问题，我们可以给元素设置 position、transform 或 opacity 属性，从而重新创建一个新的层叠上下文，保证 z-index 属性的有效性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658da2cfeb4cecbf2d3985a5