Z-index属性没有按预期工作,无法将菜单始终放在其他div元素的顶部

我面临着一个独特的问题,我下拉菜单下显示面包屑栏出于某种原因,我试图保持菜单上的面包屑。我使用z-index属性并将其分配给header元素breadcrumb元素,但它始终显示在顶部,

<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,但是我不能将其添加到问题中,因为它仍然很长