CSS Reset 引发的 z-index 问题及解决方法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们常常使用 CSS Reset 来重置浏览器默认样式，以达到更好的兼容性和可控性。然而，CSS Reset 也会带来一些问题，其中最常见的就是 z-index 的问题。

问题描述

CSS Reset 会重置元素的 z-index 属性，导致一些元素的 z-index 值变得很小，从而被其它元素覆盖。例如，下面的代码使用了一种常见的 CSS Reset：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

这个 CSS Reset 会将所有元素的 margin 和 padding 设置为 0，并将 box-sizing 属性设置为 border-box。但是，它也会将所有元素的 z-index 属性设置为 auto，这意味着它们的 z-index 值会被浏览器计算出来，而不是使用开发者手动设置的值。

例如，下面的代码中，我们想让 .modal 元素在 z 轴方向上覆盖其它元素：

// javascriptcn.com 代码示例
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

但是，由于 CSS Reset 的影响，.modal 元素的 z-index 值可能会被计算为比较小的值，从而被其它元素覆盖。这是因为，CSS Reset 会将所有元素的 z-index 属性设置为 auto，而 auto 的计算方式是根据元素在文档流中的位置和层叠上下文来计算的。

解决方法

为了解决 CSS Reset 引发的 z-index 问题，我们可以手动为元素设置一个较高的 z-index 值，从而确保它们能够在 z 轴方向上覆盖其它元素。例如，我们可以将上面的 .modal 元素的 z-index 值设置为一个更大的值：

// javascriptcn.com 代码示例
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

另外，我们也可以使用 CSS Reset 的替代方案，例如 Normalize.css。Normalize.css 不会重置元素的 z-index 属性，因此可以避免 z-index 的问题。如果您不想自己手动设置 z-index 值，可以考虑使用 Normalize.css。

示例代码

下面是一个示例代码，其中包含了一个使用了 CSS Reset 的 .modal 元素和一个使用了 Normalize.css 的 .alert 元素。您可以尝试修改它们的 z-index 值，观察它们在页面中的表现。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Reset 引发的 z-index 问题及解决方法</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1;
    }
    
    .alert {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #f00;
      color: #fff;
      padding: 10px;
      z-index: 9999;
    }
  </style>
</head>
<body>
  <div class="modal"></div>
  <div class="alert">This is an alert.</div>
</body>
</html>

总结

CSS Reset 是前端开发中常用的技术之一，但是它也会带来一些问题，其中最常见的就是 z-index 的问题。为了解决这个问题，我们可以手动为元素设置一个较高的 z-index 值，或者使用 CSS Reset 的替代方案。希望本文对您有所帮助，谢谢阅读！

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