Question

我有一个导航栏，并且下拉列表是绝对定位的，但是由于某种原因，无论z-index是什么，它们仍然显示在所有其他定位项目的后面。这使菜单既难看又难以在带有定位项的页面上使用。 Here is a codepen会显示我的导航栏及其存在的问题。有人知道怎么了吗？

这是我的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

首先，请尝试不要使用如此高的z-index。从1、10、50、100左右开始。这样，当您拥有非常高的元素时，您想要覆盖获得最高数字的所有元素

要解决此问题，请从其他任何地方删除z-index，然后从要先变高的元素开始。

在这种情况下

header nav {
   z-index: 1;
}

默认值为z-index: auto。

Answer 2

您的nav元素包含position: sticky;，但没有任何z-index。这意味着放置在其中的所有对象都将根据该nav父对象进行自身定位。如果您向该z-index元素添加比页面上任何其他元素高nav的数字，则导航栏将按预期运行。

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

此修复程序到位后，无需为nav的z索引的任何子项编制索引，因为父元素将位于页面上其他所有元素之上。

z-index不适用于我的下拉菜单

2 个答案: