Image in top right of other image?

Question

I tried the following html:

<div style="text-align: center;">
 <a href="https://example.com">
  <img src="image.png">
 </a>
 <a href="https://example2.com" style="top: 0px; right: 0px;">
  <img src="logo.png" style="width: 20px; height: 20px;" />
  </a>
</div>

What I was trying to accomplish was that the second link element, which contains an image, to be in the top right of the first image. However, the smaller image stays on the outside of the other one. Is there any possible way this could be done with the same layout? If not, then please tell me how I could make it work.

score 2 · Accepted Answer · answered Feb 29 '20 at 03:43

The answer of @TheMaleBeyonce is right. with your current layout, you should make sure this div element is just used to surround the outer image, and make sure the width of the div is equal to the outer image.

Suppose the width of outer image is 200px, the right code as below:

<style>
.wrap {
  position: relative;
  width: 200px;
}

.inner {
  position: absolute;
  top: 0;
  right: 0;
}
</style>

<div class="wrap">
  <a href="https://example.com">
    <img src="image.png">
  </a>
  <a class="inner" href="https://example2.com">
    <img src="logo.png">
  </a>
</div>

the demo

score 0 · Answer 2 · answered Feb 29 '20 at 03:02

0

So, what I would do is set the div to position:relative; and the 2nd image to position:absolute; right:0; top:0;. Assuming image 1 is as big as the div, this will make the second images position relative to the first image, so then you just position it where you like then set the width/height

answered Feb 29 '20 at 03:02

TheMaleBeyonce

25
4

I think they'd actually need to assign positions to the parent `a` elements. – Sydney Y Feb 29 '20 at 03:13

score 0 · Answer 3 · answered Feb 29 '20 at 03:25

To achieve this you need to give position: relative to the parent element, in this case: to the wrapper div. Then set position: absolute to your small image. Make sure you set width: 100% to your big image.

.big-img {
  position: relative;
}

.small-img {
  position: absolute;
  top: 0;
  right: 0;
}

<div style="text-align: center; position: relative; width: 500px;">
  <a class="big-img" href="https://example.com">
    <img width="100%" src="https://images.unsplash.com/photo-1517148815978-75f6acaaf32c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
  </a>
  <a class="small-img" href="https://example2.com" style="top: 0px; right: 0px;">
    <img src="https://images.unsplash.com/photo-1515879218367-8466d910aaa4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" style="width: 100px; height: 100px;">  </a>
</div>

In this case its not needed, But its safe to use, if he wrap the `div` with another `div` then it may not work if he doesn't set `relative` position explicitly. — Robin, Feb 29 '20 at 03:36

score 0 · Answer 4 · answered Feb 29 '20 at 04:52

<style>
.wrap {
  position: relative;
  width: 200px;
}

.inner {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px
}
</style>

<div class="wrap">
  <a href="https://example.com">
    <img src="image.png" width="100%">
  </a>
  <a class="inner" href="https://example2.com">
    <img src="logo.png" width="100%">
  </a>
</div>

Image in top right of other image?

4 Answers4