Question

您好我正在尝试放置一个简单的水平导航栏，使其浮在顶部（左下角）确切地说是一个标题。标题是简单颜色渐变的图像，位于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中。）

Answer 2

为什么不用css：

将该图像作为外部div的背景

backgroud: url('images/header.jpg')

（记得设置此div的高度与图像的高度相同）

然后你可以用相对或绝对的位置来定位内部div（如果你这样做，你必须为外部div设置position: relative）

Answer 3

如果您使用的是引导程序 5. 确保在 div 中添加 class="fixed-top"

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

3 个答案: