我的代码是这样的
<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;
}
约束条件是我无法更改标记的顺序。这是 fiddle 。请随意编辑。
最佳答案
给你。现在导航栏位于菜单包装器上。
.brand {
color: #000;
font-size: 50px;
line-height: 100px;
float:left;
关于html - 将固定定位元素的子元素定位在彼此之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18627437/