我有一个问题-我需要使第一层为标头,第二层为导航,第三层为照片。我还需要使第二层位于第三层,而不是第三层。
所有这三个层必须位于不同的元素上。
感谢您的回答。
这是我的jsfiddle:
http://jsfiddle.net/Lbahohfz/
HTML:
<body>
<header>Some content</header>
<nav>Some content</nav>
<img src="http://b-cdn.s3.amazonaws.com/wp-content/uploads/2013/06/css- style-300x1541.png"/> <!--this layer must be shown under nav (cyan background)-- >
</body>
CSS:
body{
max-width: 1600px;
margin: 0px;
}
header{
height: 50px;
line-height: 50px;
vertical-align: midlle;
padding: 0 0 0 25px;
background: red;
width: 100%;
}
nav{
height: 50px;
line-height: 50px;
vertical-align: midlle;
padding: 0 0 0 25px;
background: cyan;
width: 100%;
opacity: 0.9;
}
img {
height: 200px;
width: 100%;
}
最佳答案
只需将这些css属性添加到img
标记中:
img {
position:relative;
top:-50px;
z-index: -1;
height: 200px;
width: 100%;
}
JS FIDDLE
关于html - CSS在其他div上的位置,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30191304/