CODEWITHSUNDEEP
htmlcss
PRASANTH
PRASANTH

Reputation: 705

Image overlapping over div

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.

Upvotes: 1

Views: 15612

Answers (1)

vaso123
vaso123

Reputation: 12391

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

Upvotes: 3

Related Questions