CODEWITHSUNDEEP
htmlcss
john
john

Reputation: 71

overlayed two images using html and css if I try any other overlay they are conflicting?

I have overlayed two images successfully but if I use the same thing for other div images am getting conflict here is the jsfiddle code.. https://jsfiddle.net/cLew1t2v/ and here is code

<div >
    <div style="position:relative;">
         <img  src="http://getfreedeals.co.in/wp-content/uploads/2012/08/get-Toaster-worth-Rs.350-free-on-purchase-of-Rs.275-worth-of-frying-pan.jpg" style="position:absolute; top: 0px; left: 0px; z-index: 1; ">
         <img  src="http://lh3.ggpht.com/-9_zNrpUMkQo/VMDgzXMlX4I/AAAAAAAAAS8/HY4BkO70fB0/s1600/images.jpeg" style="position:absolute; top: 220px; left: 20px; z-index: 3;">

    </div>
</div>
 <div >
      <div  style="position:relative;">
         <img  src="http://getfreedeals.co.in/wp-content/uploads/2012/08/get-Toaster-worth-Rs.350-free-on-purchase-of-Rs.275-worth-of-frying-pan.jpg" style="position:absolute; top: 0px; left: 0px; z-index: 1; ">
         <img  src="http://lh3.ggpht.com/-9_zNrpUMkQo/VMDgzXMlX4I/AAAAAAAAAS8/HY4BkO70fB0/s1600/images.jpeg" style="position:absolute; top: 220px; left: 20px; z-index: 3;">

    </div>

</div>

Upvotes: 0

Views: 54

Answers (1)

Kuba
Kuba

Reputation: 1455

Since all selectors inside div with position: relative are positioned absolutely its height is 0.

You can set width and height to relative box and also float if you want to have inline elements.

.relative-box{
  position:relative; 
  height: 350px; 
  width: 320px; 
  float: left;
  margin: 0 10px;
}
        <div class="relative-box">
             <img  src="http://getfreedeals.co.in/wp-content/uploads/2012/08/get-Toaster-worth-Rs.350-free-on-purchase-of-Rs.275-worth-of-frying-pan.jpg">
             <img  src="http://lh3.ggpht.com/-9_zNrpUMkQo/VMDgzXMlX4I/AAAAAAAAAS8/HY4BkO70fB0/s1600/images.jpeg" style="position:absolute; top: 220px; left: 20px; z-index: 3;">
          
        </div>

          <div class="relative-box">
             <img  src="http://getfreedeals.co.in/wp-content/uploads/2012/08/get-Toaster-worth-Rs.350-free-on-purchase-of-Rs.275-worth-of-frying-pan.jpg" >
             <img  src="http://lh3.ggpht.com/-9_zNrpUMkQo/VMDgzXMlX4I/AAAAAAAAAS8/HY4BkO70fB0/s1600/images.jpeg" style="position:absolute; top: 220px; left: 20px; z-index: 3;">
            
        </div>

Upvotes: 1

Related Questions