在进行前端开发时，我们经常会使用 CSS Reset 来重置浏览器的默认样式。然而，在应用 CSS Reset 后，我们可能会遇到一些 position 和 z-index 相关的问题。本文将介绍这些问题的原因，并提供一些解决方法。
问题描述
假设我们使用了下面的 CSS Reset，将 div 元素的边框颜色设置为 red，并将其居中显示：
-- -------------------- ---- ------- - - ------- -- -------- -- - --- - ------- --- ----- ---- --------- --------- ---- ---- ----- ---- ---------- --------------- ------ -展开代码
在这种情况下，我们希望在 div 元素之上覆盖一个半透明的遮罩层：
-- -------------------- ---- ------- -------- - --------- ------ ---- -- ----- -- ------ ----- ------- ----- ----------------- ------- -- -- ----- -------- -- -展开代码
然而，我们发现遮罩层并没有出现在 div 元素之上，而是出现在了它之下。
这是因为在 CSS Reset 中，我们将所有元素的 position 属性都设置为了 absolute，这意味着它们都将相对于其祖先元素进行定位。因此，即使我们为遮罩层设置了 z-index，它也无法覆盖位于同一祖先元素中、position 属性为 absolute 的 div 元素。
解决方法
1. 设置基准祖先元素
解决这个问题的一种方法是为我们的应用设置一个基准祖先元素，并将其 position 属性设置为 relative。我们可以将所有的元素都放在这个基准元素中。这样，我们仍然可以使用绝对定位对其中的元素进行布局，但是遮罩层现在可以使用 z-index 隆重登场了。
<div class="wrapper"> <div class="box"></div> <div class="overlay"></div> </div>
-- -------------------- ---- ------- -------- - --------- --------- - ---- - ------- --- ----- ---- --------- --------- ---- ---- ----- ---- ---------- --------------- ------ - -------- - --------- --------- ---- -- ----- -- ------ ----- ------- ----- ----------------- ------- -- -- ----- -------- -- -展开代码
2. 使用 z-index 偏移量
另一种解决方法是使用 z-index 偏移量。如前所述，由于 div 元素和遮罩层都设置了 position 属性为 absolute，它们将相对于其共同的祖先元素进行定位。这意味着，如果我们将遮罩层的 z-index 设置为比 div 元素更高的值，它将覆盖 div 元素。
-- -------------------- ---- ------- ---- - ------- --- ----- ---- --------- --------- ---- ---- ----- ---- ---------- --------------- ------ -------- -- - -------- - --------- --------- ---- -- ----- -- ------ ----- ------- ----- ----------------- ------- -- -- ----- -------- -- -展开代码
在这个示例中，我们将 div 元素的 z-index 设置为 1，将遮罩层的 z-index 设置为 2。这样，遮罩层就会出现在 div 元素之上了。
总结
在进行前端开发时，我们常常需要使用 CSS Reset 来消除浏览器的默认样式。然而，在应用 CSS Reset 后，我们可能会遇到一些 position 和 z-index 相关的问题。本文提供了两种解决方法：使用基准祖先元素和使用 z-index 偏移量。这些方法可以帮助我们克服 CSS Reset 带来的难题，更轻松地进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6472f6ac968c7c53b0080d5d
