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

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

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>

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

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.