如何使用css3在图像上定位导航栏而不是图像后面？

Question

如何使用CSS3在图像上而不是图像后面放置导航栏？

因为导航栏出现在我的代码中的图像后面。

这是我的CSS：

/*header*/
.header .logo{
    height:100%;
    width:100%;
} 

body{
    font-family:Arial;
    font-size:17px;
}

nav {
    background-color: #fff;
    border: 1px solid #dedede;
    border-radius: 6px;
    box-shadow: 4px 4px 4px 3px rgba(128,128,128,0.4);
    color: #888;
    display: block;
    margin: 6px 22px 6px 22px;
    overflow: hidden;
    margin-top: -20px;
}

Answer 1

有多种方法可以做到这一点。

1. 您可以使用<div>标记设置导航栏和图片的位置。例如：

   <div id="img" style="position:absolute; top:10px; left:50px;"> <img src="img.jpg"> </div> <div id="nav" style="position:absolute; top:50px; left:100px;"> <!-- Navigation bar code here--> </div>

   （相应地更改值）

2. 使用导航栏的background-image属性。将图像设置为导航栏的背景（包括div标签内的导航栏。）

   #nav{ background-image: url(img.jpg); }

3. 使用z-index

   #nav{ z-index:100; }