图像重叠在 div 上答案

【问题标题】：Image overlapping over div图像重叠在 div 上
【发布时间】：2014-10-09 22:44:49
【问题描述】：

我面临一个重叠的小问题。

考虑一下这个 html sn-p

<html> 
  <head>
    div
    {
      width:100%;
      height:100px;
    }
    img
    {
      width:100%;
    }
    #div2
    {
      margin-top:-100px;
    }
  </head>
  <body> 
    <div id="div1"> 
      <img src=""/> 
    </div> 
    <div id="div2"> 
      some text 
    </div> 
  </body> 
</html>

我想在 div1 上重叠 div2。由于 div2 的 margin-top 等于 div1 的高度，因此代码将重叠。我的问题是图像重叠 div2。这种行为的原因是什么？

我不想为元素提供绝对位置，因为如果使用绝对位置，这段代码会破坏页面的布局。

谢谢。

【问题讨论】：

z-index 是您需要查看的属性/术语。
好的，我尝试为 div1 提供 z-index 10，为 div2 提供 20 仍然无法正常工作。
z-index 仅适用于定位元素

标签： html css

【解决方案1】：

Check this jsfiddle。正如 onetrickpony 提到的，需要定位元素。

div
{
  width:100%;
  height:100px;
}
img
{
  width:100%;
}
#div1 {
z-index: 10;
position: relative;
}

#div2
{
position: relative;  
margin-top:-100px;
border: 1px solid #f00;
z-index: 20;
color: #fff;
font-weight: bold;
}

【讨论】：

谢谢伙计..这对我来说很愚蠢，它解决了我的问题。我错过的想法是相对于 div 的样式位置。