Question

我有一个问题 - 我需要将第一层设为标题，第二层设为导航，第三层设为照片。另外我需要做的是，第二层将在第三层，但不在第三层。

所有这三层必须是不同的元素。

感谢您的回答。

这是我的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%;
}

Answer 1

只需将这些css属性添加到img标记：

img {
    position:relative;
    top:-50px;
    z-index: -1;
    height: 200px;
    width: 100%;
}

JS FIDDLE

CSS在其他div上定位

1 个答案: