Css 设置背景图像后面的Div

我在页面主体中保存了一个带有背景图像的标题和一个页面容器

HTML：

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

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

我想将容器的内容设置为在标题下，这样标题和它的背景图像就重叠在页面容器的顶部

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

---

我该如何解决这个问题？

以下是我相信您正在尝试做的事情的一小部分……如果我错了，请纠正我：

---

确保标题设置为

position:fixed

，并且

.container

需要设置为

position:relative

，以便您能够在其上设置

z索引
 根据您的编辑更新了答案：

根据示例站点，他们覆盖Header div的全部操作是：提供“-”负值中的边距，如“边距顶部：-30px；”

将“
位置：绝对”
”添加到“
标题”
”

以下是示例代码：

HTML

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

更新的Fiddle:设置
容器的
顶部
位置，使其向上移动，无论您希望
标题重叠多少。由于
标题上的z索引
，
换页
将自然位于其下方

.container {
  padding-bottom: 240px;
  border-bottom: 1px solid #000;
  background: url('images/OVbg2.png') no-repeat left bottom, url('images/OVbg3.png') no-repeat left top;
  background-size: 100%;
  position: relative;
  top: -20px;
}

您可能希望将其保存为透明png，以使重叠不包括蓝色背景
标题{position:absolute；}
？Set
position:absolute。@Brian这仍然有标题的背景图像显示在div容器后面。我需要背景图像重叠并位于容器顶部，这就是我如上所述设置z索引的原因，但它不起作用C link Nepal的答案应该起作用trick@Brian我在上面的编辑中提供了一个例子，它没有解决背景图像的问题，这是真正的问题，它不会改变结果，是的，换页在页眉后面，但我希望页眉的剥离背景图像显示在换页的顶部，它仍然显示在后面，我希望剥离背景图像显示在重叠处，而不是下方，但它没有显示在后面。请阅读我答案的最后一句，因为我已经解决了这个问题too@Tester用这个（一个透明的png）替换标题图像没有问题：）快乐编码标题中的剥离图像仍然没有与白色容器重叠，它是分开的，我已经尝试了很长时间来让它工作。它的重叠。。如果你说的是“橘皮”图片下面的蓝色，那么它只是图片的一部分。。。您需要修复图像以使其透明。否则，如果您看到橘皮图像框“标题”与“容器”重叠，因为“内容”隐藏在图像后面。请查看此更新的提琴，了解重叠框的概念：
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;
}

.container {
  padding-bottom: 240px;
  border-bottom: 1px solid #000;
  background: url('images/OVbg2.png') no-repeat left bottom, url('images/OVbg3.png') no-repeat left top;
  background-size: 100%;
  position: relative;
  top: -20px;
}