html - 如何放置导航栏以使其漂浮在图像上方？

Question

您好，我正在尝试放置一个简单的水平导航栏，以便它 float 在顶部(在左下角 准确地说)的标题。标题是一个简单的颜色渐变图像，位于一个 div 中。代码 因为导航栏位于另一个 div 的内部，但始终出现在标题下方。 这是 html:

<div>
    <img id="Header" src="images/header.jpg"/>
    <div>   
        <ul id="nav">
            <li><a href="#">About Us</a></li>
            <li><a href="#">Our Products</a></li>
            <li><a href="#">FAQs</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Login</a></li>
        </ul>
    </div>
</div>  
<img id="Decal" src="images/decal.png"/>

以及相关的 CSS:

#Header {
height:205px;
width: 100%;
z-index:1;
}

#Decal {
position: absolute;
z-index: 2;
right: 5px;
top: 1px;
}
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc; 
border-top: 1px solid #ccc; }
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #c00;
background-color: #fff; }

这一直困扰着我很长一段时间，所以非常感谢任何帮助，谢谢!

Answer 1

好的，这里有两个选择:

1) 正如@SaganTheBeast 所说，您可以将图像添加为 background-image，然后绝对将导航定位在其中。

2) 您也可以在不将图像移动到背景的情况下执行 position: absolute 技巧。为此，您需要在 HTML 周围添加一个包装器，并设置 display: relative。然后，绝对定位您的 #nav 元素，并添加 bottom: 0px 和 width: 100%。这会将您的 #nav 固定到容器元素的底部，并确保它占据整个宽度。

这是一个工作演示:http://codepen.io/anon/pen/BWXNQp?editors=1100#0

(请注意，为了使其完全符合您的需要，我必须将 margin: 0px 添加到您现有的 #nav CSS。)