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;

将固定定位元素子元素定位在彼此之上

1 个答案: