HTML Позиция изображение поверх другого

Question

Я ищу, чтобы разместить изображение поверх другого изображения около 10 пикселей от нижней части изображения. Проблема в том, что если я буду следовать таким методам, как показано ниже, когда веб-браузер масштабируется, верхнее изображение перемещается по всему месту. Нижнее изображение относительное, а верхнее изображение абсолютно позиционируется, если кто-либо не хочет открывать ссылку.

CSS-Tricks text-blocks-over-image

Answer 1

Хотя ваша скрипка, похоже, использует один и тот же образ дважды, я думаю, что я сделал корректировки, необходимые, чтобы получить ответ на свой вопрос. У вас был тот же стиль, который применялся к обоим изображениям внутри контейнера изображений ... добавление пары классов разрешило это (или вы могли использовать psuedo-selectors).

В будущем я бы рекомендовал поставить код для вашего вопроса непосредственно в вопрос, так как он поможет сообществу помочь вам. Если вы можете, возможно, вернитесь и поместите свой оригинальный код в этот вопрос, это поможет тем, кто споткнется на этот вопрос/ответ в будущем.

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

Answer 2

Ах, думает, у меня есть лучшее понимание вопроса сейчас ... что об использовании процента как для левых и верхних атрибутов? Похоже, что при масштабировании браузера сохраняется согласованный интервал.

HTML:

<div> 
    <div class="image-container"> 
    <img src="http://lorempixel.com/1000/500"> 

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

CSS:

.image-container { 
    position: relative; 
} 

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

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