Question

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

考虑这个html代码段

<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。这种行为的原因是什么？

我不想给元素赋予绝对位置，因为如果使用position absolute，这段代码将破坏页面的布局。

感谢。

Answer 1

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

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上

1 个答案: