网站导航运动

所以这里是我的问题。如何让我的导航栏不会重叠到图片上，以及它何时会出现在图片下方，因此您仍然能够读取图片并使用导航？网站导航运动

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>

如果这个问题没有意义，使结果窗口相当大，然后放大，你会明白我的意思。

Here是我的意思（搜索栏）的一个例子。

任何帮助将是伟大的。

在此先感谢。

来源

2014-01-05 user3161771

你可以看看这个，看看这是否工作？ http://jsfiddle.net/HvJc5/4/ – BuddhistBeast

@BuddhistBeast这正是我想要的，除了我似乎无法得到中间的图片，导航在左边，但也在同一'线'如果你知道我的意思。 – user3161771

嗯...试试这一个：http://jsfiddle.net/HvJc5/7/如果你放大和缩小，当你放大时图片会在中间去，在你缩小的时候图片会保持这样内联余额。 – BuddhistBeast

这里是你正在寻找：

DEMO

看来，你有你的图片浮动到左边，这个CSS表示：

float: left;

这将意味着所有的内容是将照片右侧不管是什么，所以我只是把该行的代码出来，并使图片text-align:center;这意味着照片将保持居中不管什么（给你一个很好的响应运动）。

只要我帮个忙，远离位置效应（相对，绝对，固定），除非你绝对需要它......浮动使用更好，因为它们的响应比定位效果要好得多。另外，绝对定位一定会让你头疼！

希望这有助于:)

来源

2014-01-05 20:57:27 BuddhistBeast

使用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

来源

2014-01-05 03:58:08

尽管知道这一点很有用，但它并不是我想要的，因为一旦它落在图片后面，用户就无法使用链接进行导航。 – user3161771

网站导航运动

回答

相关问题