css - HTML Position image on top of another

Question

I'm looking to position an image on top of another image about 10 pixels from the bottom of the image. The issue is that if I follow methods like below when the web browser is scaled the top image moves all over the place. The bottom image is relative and the top image is absolutely positioned if anyone doesn't want to open the link.

CSS-Tricks text-blocks-over-image

Answer 1

Though your fiddle seems to be using the same image twice, I think I've made the adjustments you need to get your answer. You had the the same styling applied to both images inside of the image-container... adding a couple classes resolved this (or you could use psuedo-selectors).

In the future, I'd recommend putting the code for your question directly into the question as it will help the community help you. If you can, maybe go back and put your original code into this question, it will help those who stumble on this question/answer in the future.

HTML:

<div>
  <div class="image-container">
    <img class="firstimg" src="http://lorempixel.com/1000/500">
    <a class="social-image" href="https://www.instagram.com">
          <img class="secondimg" src="http://lorempixel.com/1000/500">
        </a>
  </div>
</div>

CSS:

.image-container {
    position: relative;
}

.image-container .firstimg {
    width: 100%;
}

.social-image img {
    position: absolute;
    /* left: 3em; */
    top: 70px;
    width: 100%;
    z-index:9999;
}