我不是网络开发专家，所以请多多包涵。
我想为一个页面显示横幅样式标题，顶部由 275x116 的图像占据，然后水平菜单栏(使用 ul 元素设置样式)出现在距离横幅顶部 70% 的位置。
我该如何设置才能使横幅显示在我的导航栏下方？目前，我的菜单栏左侧的一部分位于图像下方，但我希望它是相反的，因此菜单栏位于图像上方，如下所示:
============= <start of header> ===========
--------
| img |
| |
| Horizontal menu
| |
--------
============= <end of header> ===========
我的CSS:
#header
{
background-color: green;
border: 0;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 120px;
}
#logo
{
background: green url(images/logo.png) no-repeat scroll 0 0;
margin: 0px 0px;
border: 1px solid white;
left: 20px;
top: 20px;
width: 275px;
height: 116px;
position: absolute;
z-index: -1000;
}
.container {
border:1px solid grey;
margin-left:auto;
margin-right:auto;
width:960px;
}
我的 HTML:
<body>
<div id="header">
<div id="logo">
</div>
<div class="container" id="primaryNavbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">Shows</a></li>
<li><a href="#">Movies</a></li>
</ul>
<div class="clear"> </div>
</div> <!-- end of container -->
</div> <!-- end of header -->
</body>
我认为将 Logo 元素的位置设置为“绝对”并添加非常低的 z-index 可以实现此目的，但此处并非如此。
有什么建议吗？
最佳答案
将这些元素附加到您现有的样式:
#header
{
position: relative; //this will keep your absolute items inside of this container
}
#logo
{
z-index: 1;
}
.container {
z-index: 2;
position: absolute;
}
.container ul li {
float: left;
}
关于html - 将元素定位在另一个之下，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2458446/