Question

我在页面正文中有一个带有背景图片和页面容器的标题

HTML：

<header>
<nav>Item1-Item2</nav>
</header>

<div class="container">
Content
</div>

css：

header{
background: url(images/header.jpg) no-repeat;
background-size: 100% 110%;
position: relative;
z-index: 99999;
}

我会谎言将容器的内容设置在标题下，因此标题及其背景图像重叠在页面容器的顶部。

上面的代码不起作用，容器似乎落后但是，背景图像不重叠并显示在内容区域顶部。

我该如何解决这个问题？

Answer 1

将.container的{{1}}位置置为负值以向上移动，但是您希望top重叠。由于header上的z-index，header自然会落在它之下。

page-wrap

您可能希望将其保存为透明png，以便重叠不包括蓝色背景

Answer 2

这是一个我相信你想要做的JSFiddle ...如果我错了，请纠正我：

http://jsfiddle.net/t2cjmwtd/

确保标题设置为position: fixed且.container必须为position: relative，以便您能够在其上设置z-index 。

Answer 3

根据您的修改更新了答案：

根据示例网站，他们所做的一切都是为了覆盖Header div：提供保证金＆＃34; - ＆＃34;负值如＆＃34; margin-top：-30px;＆＃34;

添加＆＃34; position:absolute＆＃34;到＆＃34; header＆＃34;

以下是示例代码：

<强> HTML

<div class="main-container">
    <header>
        <nav>Item1-Item2</nav>
    </header>
    <div class="container">Content</div>
</div>

<强> CSS

header {
    background: #ffff00 url(http://cbbnideas.com/orchard/wp-content/themes/Orchard/images/header.jpg) no-repeat;
    min-height: 200px;
    height: 40%;
    padding-top: 30px;
    background-size: 100% 100%;
    position: relative;
    z-index: 3;
}
.container {
    background-color: #fff;
    box-shadow: 1px 2px 7px rgba(17, 17, 17, .5);
    padding-bottom: 80px;
    margin-top: -30px;
}

在背景图像背后设置Div

3 个答案:

更新了小提琴：http://jsfiddle.net/2az1hzne/5/