html - 将固定定位元素的子元素相互叠加

Question

我的代码是这样的

<div class="nav-fixed">
    <div class="brand">
        Logo of the company
    </div>
    <div class="menu">
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Products</li>
            <li>Others</li>
        </ul>
    </div>

</div>

<div class="data">
    <p>
    If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed' ...
    </p>    
</div>

<div class="overlay">

</div>

 <div class="highlight">

 </div>

在这个我有 3 个固定位置元素，导航栏、叠加层和突出显示部分。现在我想将品牌带到导航栏内的突出显示顶部。然后是下一个突出显示，然后是下一个叠加层，然后是正文或导航栏..

的CSS

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #000;
    opacity: 0.7;
    z-index: 1000;
}

.highlight {
    position: fixed;
    top: 5px;
    left: 5px;
    width: 200px;
    height: 50px;
    background: #efefef;
    z-index: 1100;
    border-radius: 5px;

}

.nav-fixed {
    background: #333;
    height: 60px;
    position: fixed;
    top: 0;
    padding: 0 20px;
    left: 0;
    right: 0;
}

.brand {
    color: #fff;
    font-size: 20px;
    line-height: 60px;
    display: inline-block;
    z-index: 1200;
    position: relative;
}
.menu {
    float: right;
}

.menu ul {
    list-style-type: none;
    margin: 0;
}

.menu ul li {
    display: inline-block;
    line-height: 60px;
    margin: 0 5px;
    color: #fff;
    cursor: pointer;

 }

约束是我不能改变标记的顺序。这是小提琴。随意编辑。

http://jsfiddle.net/bjcth/

Answer 1

干得好。现在导航栏位于菜单包装器上。

.brand {
 color: #000;
 font-size: 50px;
 line-height: 100px;
 float:left;