在前端开发中，我们常常使用 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 轴方向上覆盖其它元素：
-- -------------------- ---- ------- ------ - --------- ------ ---- -- ----- -- ------ ----- ------- ----- ----------------- ------- -- -- ----- -------- ----- -
但是，由于 CSS Reset 的影响，.modal 元素的 z-index 值可能会被计算为比较小的值，从而被其它元素覆盖。这是因为，CSS Reset 会将所有元素的 z-index 属性设置为 auto，而 auto 的计算方式是根据元素在文档流中的位置和层叠上下文来计算的。
解决方法
为了解决 CSS Reset 引发的 z-index 问题，我们可以手动为元素设置一个较高的 z-index 值，从而确保它们能够在 z 轴方向上覆盖其它元素。例如，我们可以将上面的 .modal 元素的 z-index 值设置为一个更大的值：
-- -------------------- ---- ------- ------ - --------- ------ ---- -- ----- -- ------ ----- ------- ----- ----------------- ------- -- -- ----- -------- ----- -
另外，我们也可以使用 CSS Reset 的替代方案，例如 Normalize.css。Normalize.css 不会重置元素的 z-index 属性，因此可以避免 z-index 的问题。如果您不想自己手动设置 z-index 值，可以考虑使用 Normalize.css。
示例代码
下面是一个示例代码，其中包含了一个使用了 CSS Reset 的 .modal 元素和一个使用了 Normalize.css 的 .alert 元素。您可以尝试修改它们的 z-index 值，观察它们在页面中的表现。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ----- --- ------- ---------------
----- ---------------- --------------------------------------------------------------------------------
-------
- -
------- --
-------- --
----------- -----------
-
------ -
--------- ------
---- --
----- --
------ -----
------- -----
----------------- ------- -- -- -----
-------- --
-
------ -
--------- ------
---- ----
----- ----
---------- --------------- ------
----------------- -----
------ -----
-------- -----
-------- -----
-
--------
-------
------
---- --------------------
---- ------------------ -- -- ------------
-------
-------总结
CSS Reset 是前端开发中常用的技术之一，但是它也会带来一些问题，其中最常见的就是 z-index 的问题。为了解决这个问题，我们可以手动为元素设置一个较高的 z-index 值，或者使用 CSS Reset 的替代方案。希望本文对您有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65585a31d2f5e1655d28abc3