html - Z-index 属性未按预期工作，将菜单始终置于其他 div 元素之上

Question

我遇到了一个独特的问题，由于某种原因，我的下拉菜单显示在面包屑栏下，我尝试了一切以使菜单保持在面包屑顶部。我使用了 z-index 属性并将其分配给标题元素、面包屑元素，但它始终显示在顶部，

面包屑下方占位符始终显示在顶部

<div class="container bc-wrapper bc-wrapper-z-index">
    <div class="row vertical-center">
        <div class="col-sm-6">
            <h2 id="ContentPlaceHolder1_H2PageTitle" class="page-title">News</h2>
        </div>
        <div class="col-sm-6">
            <ul class="breadcrumb">
                <li><a href="http://localhost:55375/">Home</a></li>
                <li><a href="#">Media</a></li>
                <li class="active">News</li>
            </ul>
        </div>
    </div>
</div>

我已将完整代码放在 codepen 上，我花了 2-3 天时间试图解决这个问题，但我现在不知道为什么它会这样

当我从 bc-wrapper 类中删除背景颜色时，它会位于图像和菜单下方

.bc-wrapper {
    height: 50px;
    z-index: 5;
    margin-top: -25px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    line-height: 50px;
    vertical-align: middle;
}

我不确定我哪里做错了？

更新:我已经从 codepen 示例中删除了大部分不相关的 CSS，但我不能将其添加到问题中，因为它仍然很长

Answer 1

问题在于 stacking (在 z 轴上组织元素)。

自 header -元素的位置 relative及其 z-index低于您的面包屑条，更高的 z-index对 header 的任何子项仅与 header 中的元素相关。解决方案是获取 list (菜单)脱离标题的上下文并将其放在与面包屑栏相同的上下文中，因此它的 z-index 实际上更高。

更改 position至 static在你的 header -元素和集合 z-index至少9在 dropdrop-menu 上只是解决这个问题的方法之一。

.non-homepage{
    min-height: 200px;
    position: static; /*instead of relative*/
    background-image: url('/images/bg/bg1_L3.jpg');
    background-position: bottom;
}

NOTE
If you look at your codepen you see a lot of redundant CSS rules set. This will make debugging very hard since a lot of those rules will interact with each other. Less is more. My advice would be to all web site designers to limit the amount of CSS to the absolute necessary to style your page