Html Position Image On Top Of Another

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 scal

Solution 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><divclass="image-container"><imgclass="firstimg"src="http://lorempixel.com/1000/500"><aclass="social-image"href="https://www.instagram.com"><imgclass="secondimg"src="http://lorempixel.com/1000/500"></a></div></div>

CSS:

.image-container {
    position: relative;
}

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

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

Solution 2:

Ah, think I have a better understanding of the question now... what about using a percentage for both the left and top attributes? That seems to keep spacing consistent when the browser is scaled.

HTML:

<div><divclass="image-container"><imgsrc="http://lorempixel.com/1000/500"><aclass="social-image"href="https://www.instagram.com"><imgsrc="http://lorempixel.com/1000/500"></a></div></div>

CSS:

.image-container {
    position: relative;
}

.image-containerimg {
    width: 100%;
}

.social-image {
    position: absolute;
    left: 5%;
    top: 5%;
    width: 100%;
}