CODEWITHSUNDEEP
htmlcss
Dreams
Dreams

Reputation: 8506

How to make image position absolute relative to another image?

#main {
  border: 2px blue solid;
  width: 100%;
}

#photo {
  display:flex;
  align-items: center;
  justify-content: center;
}

#photo > #large {
  width:70%;
  margin: 20px 0px;
  border: 3px red solid;
}

#small {
  position: absolute;
  width:150px;
  left:0px;
}
<div id="main">
    <div id="photo">
        <img src="image/test.jpg" id="large">
        <img src="image/sale.jpg" id="small">
    </div> 
</div>

Above is my code. What I want is for the large image to be centered in photo div and the small image to be set to absolute and positioned relative to large image.

How can I do that?

Right now the small image is relative to main div.

Upvotes: 1

Views: 2775

Answers (2)

Bhargav Ponnapalli
Bhargav Ponnapalli

Reputation: 9412

You will need to use an extra div here.

#main {
  border: 2px blue solid;
  width: 100%;
}

#photo {
  display: flex;
  align-items: center;
  justify-content: center;
}

#photo > #photo-center {
  width: 70%;
  position: relative;
  margin: 20px 0px;
  border: 3px red solid;
}

#large{
  width: 100%;
}

#small{
  width: 150px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
<div id="main">
    <div id="photo">
        <div id="photo-center">
            <img src="http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg" id="large">
            <img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" id="small">
        </div>
    </div>
</div>

Upvotes: 3

Max Lutz
Max Lutz

Reputation: 11

Not sure if this is what you're trying to accomplish but you could always set your large image as the background of #photo and position the small one relative inside that box.

#photo {
    background-image: url(large.jpg);
    position: relative;
}
#photo > img {
    position: absolute;
}

Upvotes: 0

Related Questions