我有一个问题-我需要使第一层为标头,第二层为导航,第三层为照片。我还需要使第二层位于第三层,而不是第三层。

所有这三个层必须位于不同的元素上。

感谢您的回答。

这是我的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/

10-11 22:44
查看更多