使用CSS将图片放在div后面

debugcn 发表于 Dev

米格尔·莫拉（Miguel Moura）

我有以下标记（此处为小提琴示例：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吗？

迪帕斯

我会包装2 divs .menu，.tools所以您只需要应用z-index到包装器即可，div而不是每个孩子都可以。在.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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。