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

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

这是您要查找的内容:

DEMO

看起来你的图片漂浮在左边，用这个 CSS 表示:

float: left;

这意味着无论如何您的所有内容都将位于照片的右侧，所以我只是删除了那行代码，并使图片 text-align:center;这意味着无论如何照片都会保持居中(为您提供良好的响应 Action )。

帮我一个忙，远离位置效果(相对的、绝对的、固定的)，除非你绝对需要它…… float 更好用，因为它们的响应比定位效果好得多。另外，绝对定位肯定会让你一段时间后头疼!

希望这对您有所帮助:)