Z 索引不适用于我的下拉菜单

Question

我有一个导航栏，下拉列表是绝对定位的，但由于某种原因，无论 z 索引如何，它们仍然出现在所有其他定位项目的后面。这使得菜单既丑陋又难以在具有定位项目的页面上使用。这是一个代码笔，显示我的导航栏及其遇到的问题。有谁知道出了什么问题？

这是我的 css 的一个小刺，因为我认为你不希望在我的问题中使用完整的 150 行代码：

header nav ul li ul {
background-color: #00242b;
transition: opacity 400ms ease-in;
opacity: 0;
position: absolute;
height: 0px;
z-index: 1000000000; /* why wont this work? */
overflow: auto;
transform: translate(0px, 0px);
overflow: auto;
}
#absolute { /* this is on top despite the lower z-index */
position: absolute;
width: 80px;
height: 40px;
background-color: red;
z-index: 0;
left: 20px;
top: 80px;
}

Answer 1

您的nav元素具有position: sticky;但没有任何z-index。这意味着位于其中的任何东西都将基于该nav父级来定位自己。如果将比页面上任何其他元素更高的z-index数字添加到该nav元素，则导航将按预期运行。

使用您的示例，红色框具有z-index: 1;。如果将z-index: 2;添加到nav元素，则整个导航将位于其上方。

一旦此修复程序到位，就不需要对nav的任何子元素进行 z 索引，因为父元素将位于页面上的其他所有元素之上。

Answer 2

首先，尽量不要使用这么高的 z 指数。从 1、10、50、100 左右开始。这样，当你有一个非常高的元素时，你想要覆盖所有获得最高数量的元素

要解决此问题：从其他任何地方删除 z 索引，并从要先达到高的元素开始。

在这种情况下

header nav {
z-index: 1;
}

默认值为z-index: auto。