CSS Reset 后 z-index 失效的问题解决方案

背景

在前端开发中，我们经常会使用 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 属性的有效性。

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

<style>
.parent {
  position: relative;
}
.child1 {
  z-index: 1;
}
.child2 {
  z-index: 2;
}
</style>

2. 给元素设置 transform 属性

给元素设置 transform 属性也可以创建一个新的层叠上下文。例如，给一个元素设置 transform: translateZ(0); 就可以创建一个新的层叠上下文，从而保证 z-index 属性的有效性。

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

<style>
.parent {
  transform: translateZ(0);
}
.child1 {
  z-index: 1;
}
.child2 {
  z-index: 2;
}
</style>

3. 给元素设置 opacity 属性

给元素设置 opacity 属性也可以创建一个新的层叠上下文。例如，给一个元素设置 opacity: 0.99; 就可以创建一个新的层叠上下文，从而保证 z-index 属性的有效性。

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

<style>
.parent {
  opacity: 0.99;
}
.child1 {
  z-index: 1;
}
.child2 {
  z-index: 2;
}
</style>

总结

CSS Reset 可以帮助我们消除浏览器默认样式，提高网页的一致性。然而，它也会影响元素的层叠顺序，导致 z-index 属性失效。为了解决这个问题，我们可以给元素设置 position、transform 或 opacity 属性，从而重新创建一个新的层叠上下文，保证 z-index 属性的有效性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658da2cfeb4cecbf2d3985a5