html - 使用 CSS 将图像放在 div 后面

Question

我有以下标记(此处为 Fiddle 示例:http://jsfiddle.net/9gvj11o5/8/)

<div class="header">           
  <div class="image">
    <img src="http://placehold.it/2200x800" alt=""/>
  </div>    
  <div class="menu">This is the menu</div>    
  <div class="tools">These are the tools</div>        
</div>    
<div class="content">content</div>    

以及以下 CSS:

.header {
  position: relative;
}

.image {
  position: absolute;
}

img {
  width: 100%;
  height: auto;
  outline: 0;
}

我需要图像具有响应性并且 100% 宽度与顶部对齐。

但我还需要菜单和工具在图像上并保持正常流动。

内容应该在图片之后，所以在标题之后。

图像将是页眉 div 的“背景”。 (我不能使用背景图片)

我正在使用位置，但菜单和工具在我使用它的那一刻就消失了。

我错过了什么？我在某处需要另一个包装 div 吗？

Answer 1

我会包装 2 个 div .menu & .tools 所以你只需要将 z-index 应用到包装器 div 而不是每个 child 。这使得 .menu 和 .tools(包装)在 .image 的前面。

然后将 position:absolute 更改为 position:relative 为 .image 以便下面有 .content header 。

下面你可以看到代码片段，非常轻量级。

.header {
    position: relative;
}
.image {
    position: relative;
    z-index:1
}
#menu-all {
    position:absolute;
    top:0;
    z-index:2
}
img {
    width: 100%;
    height: auto;
    outline: 0;
}

<div class="header">
    <div class="image">
        <img src="http://placehold.it/2200x800" alt="" />
    </div>
    <div id="menu-all">
        <div class="menu">This is the menu</div>
        <div class="tools">These are the tools</div>
    </div>
</div>
<div class="content">content</div>