z-index 属性用于控制 html 元素在垂直方向上的堆叠顺序。 它决定了当元素发生重叠时，哪个元素显示在上面。 数值越大，元素的堆叠顺序越高，越容易显示在其他元素之上。
理解 z-index 的关键在于它只影响堆叠上下文中的元素。 这可不是简单的数字大小比较。我曾经在项目中遇到一个令人头疼的 bug，就是因为忽略了堆叠上下文这个概念。当时，我需要将一个浮动导航栏置于一个背景图片之上。我简单地给导航栏设置了一个较高的 z-index 值，例如 10，而背景图片的 z-index 为 1。结果，导航栏仍然被背景图片遮挡。
问题出在哪里呢？背景图片所在的容器并没有形成一个新的堆叠上下文。 只有在满足特定条件下，一个元素才会创建新的堆叠上下文，例如 position 属性值为 absolute、relative、fixed、sticky，或者 opacity 值小于 1，transform、filter 等属性应用等等。 我的背景图片所在的容器 position 属性是默认值 static，因此它没有创建新的堆叠上下文。 这意味着，即使导航栏的 z-index 比背景图片高，它们都在同一个堆叠上下文中，z-index 的作用被限制在该上下文内。 其他一些元素，例如父元素的 z-index 也会影响结果。
解决方法很简单，我只需要给背景图片的父容器添加 position: relative，让它创建一个新的堆叠上下文。 这样一来，导航栏和背景图片就分别位于不同的堆叠上下文中，z-index 属性才能正常发挥作用，导航栏最终成功显示在背景图片之上。
另一个例子是处理模态框（modal）。 模态框需要始终显示在页面其他内容之上。 为了实现这一点，通常会给模态框设置一个非常高的 z-index 值，比如 1000。 与此同时，你需要确保模态框的父元素或祖先元素也拥有合适的堆叠上下文，以避免被其他元素遮挡。 我曾经见过一些开发者忽略这一点，导致模态框被其他高 z-index 元素覆盖，造成用户体验上的问题。
总而言之，有效运用 z-index 需要理解堆叠上下文。 仅仅设置一个大的数值是不够的，你需要仔细分析元素的层级关系和堆叠上下文，才能确保元素的显示顺序符合预期。 记住检查元素的 position 属性和其他可能创建堆叠上下文的属性，这将帮助你避免许多不必要的麻烦。
