Question

如何让我的导航栏不重叠到图片上，当它出现在它下面时，你仍然能够阅读图片并使用导航？

Here是我的代码的链接。

CSS

.navigation{
list-style-type: none;
position: absolute;
vertical-align: middle;
}

.navigation ul{
list-style-type: none;
padding: 0; 
text-align: right;
float: right;
vertical-align: middle;
}

.navigation li{
display: inline;
padding-left: 10px;
vertical-align: middle;
font-size: 24px;
}

.header .navigation{
position: absolute;
top: 0;
right: 20px;
}

HTML

<div class="navigation">
  <ul>
    <li><a class="live" href="index.html">Home</a></li>
    <li><a href="#">Unit 1</a></li>
    <li><a href="#">Unit 2</a></li>
    <li><a href="#">Unit 3</a></li>
 </ul>
</div>

如果问题没有意义，请将结果窗口设置得相当大，然后放大，你会看到我的意思。

Answer 1

使用z-index属性

<强> CSS

.header h1 a{
    display: inline-block;
    color: white;
    width: 135px;
    height: 50px;
    background: url(http://www.gpccolorado.com/wp-content/uploads/2013/10/Square-head.jpg);
    text-indent: -9999px;
    background-size: cover;
    z-index:500;
    position:relative;
}

Working Demo

Answer 2

以下是您要找的内容：

DEMO

似乎你的图片浮动到左边，由这个CSS代表：

float: left;

这意味着你的所有内容都会出现在照片的右边，无论如何，所以我只是把这行代码拿出来，并制作了照片text-align:center;，这意味着照片会保持居中什么（给你那个很好的响应运动）。

请帮我一个忙，远离位置效果（相对的，绝对的，固定的），除非你绝对需要它...漂浮物更好用，因为它们的反应比定位效果要好得多。另外，绝对定位肯定会让你在一段时间后头疼！

希望这有助于：）

当导航栏与内容重叠时更改导航栏的位置

2 个答案: