Image overlapping over div

2019-09-17 03:57发布

站内问答 / HTML/CSS
1037 1 5

iam facing a small issue with overlapping .

Consider this html snippet

<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>

I want to overlap a div2 over div1. As the code will overlap since margin-top of div2 equals height of div1. My problem is image is overlapping div2. What is the reason of this behaviour ?

And i don't want to give position absolute to the elements since this code will break the layout of the page if position absolute is used.

Thanks.

标签： html css
举报
1条回答
够拽才男人
2楼-- · 2019-09-17 04:05

Check this jsfiddle. As onetrickpony mentioned, need to be positioning the elements.

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;
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)