CSS z-index 未正确堆叠

Question

我在 CSS z-index 堆叠方面遇到问题。

HTML：

<ul>
    <li><a href="#">Title 1</a></li>
    <li class="dropMenu"><a href="#">Title 2</a>
        <div class="containerDropDown">
            <ul class="menu">
                <li><a href="#">Lorem ipsum link</a></li>
                <li><a href="#">Lorem ipsum dolor sit met link amet ipsum link</a></li>
                <li><a href="#">Dolor sit amet link</a></li>
                <li><a href="#">Lorem ipsum link</a></li>
                <li><a href="#">Dolor sit amet link</a></li>
                <li><a href="#">Lorem ipsum link</a></li>
            </ul>
        </div>
    </li>
    <li><a href="#">Title 3</a></li>
    <li><a href="#">Title 4</a></li>
    <li><a href="#">Title 5</a></li>
</ul>

CSS：

li.dropMenu {
    z-index:100;
}
.dropMenu:hover {   
    padding-bottom:9px;
    border:1px solid #575a5d;
    border-bottom:0;
    background-color:#434749;
    position:relative;
    -moz-box-shadow:0 0 5px #000;
    -webkit-box-shadow:0 0 5px #000;
    box-shadow:0 0 10px #000;
    z-index:100;
}
.dropMenu:hover a {
    padding:0 9px;
    color:#8f6f4d;
}
.dropMenu ul {
    width:198px;
    left:-999em;
    padding:16px 0 0 0;
    border:1px solid #575a5d;
    background-color:#434749;
    position:absolute;
    -moz-box-shadow:0 0 5px #000;
    -webkit-box-shadow:0 0 5px #000;
    box-shadow:0 0 5px #000;
}
.dropMenu:hover ul {
    /*top:32px;*/
    top:10px;
    left:-1px;
    z-index:20;
}
.dropMenu ul li {
    display:block;  
    width:100%;
    padding:0;
    z-index:70;
}
.dropMenu:hover ul li a,
.dropMenu ul li a{
    display:block;
    padding:0 30px 22px 30px;
    font-size:0.8em;
    color:#d0cfcb;
    background:transparent url("/images/background/dropDownMenu-arrow.gif") no-repeat 21px 4px; 
} 

我需要让 li.dropMenu 具有比其子 ul 更高的堆叠顺序。我尝试更改 z-index 但没有成功。有谁知道有什么解决办法吗？我正在尝试创建一个简单的下拉菜单，但子 UL 似乎始终位于父 li.dropMenu 之上。

我给子 ul 一个盒子阴影，但因为它总是在顶部，所以阴影会覆盖 li.dropMenu

Answer 1

您需要在 CSS 中为要使用 z-index 的每个元素设置一个 position 属性（static 除外）。

Answer 2

您需要为 li.dropMenu 指定一个 position 才能使 z-index 正常工作。

在这里尝试

li.dropMenu {
    z-index:100;
    position:relative;
}

更多信息：

z-index指定位置值为1的盒子的堆栈级别
绝对、固定或相对。

http://reference.sitepoint.com/css/z-index

Answer 3

您遇到的问题是，绝对定位的元素是相对于其最近的祖先以非静态（即相对、绝对、固定）定位放置的。因此，您的子 z-index 仅在父元素的上下文中应用，而不是与它进行比较。解决方案：将父级的内容放在子级的同级中：

<ul>
    <li><a href="#">Title 1</a></li>
    <li class="dropMenu">
        <div class="parentItemHolder"><a href="#">Title 2</a></div>
        <div class="containerDropDown">
            <ul class="menu">
                <li><a href="#">Lorem ipsum link</a></li>
                <li><a href="#">Lorem ipsum dolor sit met link amet ipsum link</a></li>
                <li><a href="#">Dolor sit amet link</a></li>
                <li><a href="#">Lorem ipsum link</a></li>
                <li><a href="#">Dolor sit amet link</a></li>
                <li><a href="#">Lorem ipsum link</a></li>
            </ul>
        </div>
    </li>
    <li><a href="#">Title 3</a></li>
    <li><a href="#">Title 4</a></li>
    <li><a href="#">Title 5</a></li>
</ul>

使用 CSS（注意，为了简洁起见，我删除了一些原始内容）：

.dropMenu {
    position: relative;
}
.dropMenu:hover div.parentItemHolder {   
    padding-bottom:9px;
    border:1px solid #575a5d;
    border-bottom:0;
    background-color:#434749;
    position:relative;
    -moz-box-shadow:0 0 5px #000;
    -webkit-box-shadow:0 0 5px #000;
    box-shadow:0 0 10px #000;
    z-index:100;
}
.dropMenu ul {
    width:198px;
    display: none; /* using display: none; instead of left: -999em; */
    padding:16px 0 0 0;
    border:1px solid #575a5d;
    background-color:#434749;
    -moz-box-shadow:0 0 5px #000;
    -webkit-box-shadow:0 0 5px #000;
    box-shadow:0 0 5px #000;
}
.dropMenu:hover ul {
    display: block;
    position: absolute;
    z-index:20;
}

Answer 4

z-index 仅适用于定位元素（位置：绝对、位置：相对或位置：固定）。

Answer 5

首先删除 z 索引，

然后您应该定位同级 a 和 .containerDropDown，或者删除 .containerDropDown > 并只需使用 ul 即可。

那么你只需要添加：

.dropMenu>a{position:relative;z-index:2}

这比尝试使子 z-index 小于父 z-index 要容易得多。

做了一个小提琴： http://jsfiddle.net/filever10/TbJt3/