Как мне разместить одно изображение поверх другого в HTML?

Самый простой способ сделать это - использовать фоновое изображение, а затем просто поместить в этот элемент <img>.

Другой способ сделать это - использовать слои css. Есть масса ресурсов, которые помогут вам в этом, просто поищите css слои.

Это простой взгляд на то, что я сделал, чтобы наложить одно изображение на другое.

img {
  position: absolute;
  top: 25px;
  left: 25px;
}
.imgA1 {
  z-index: 1;
}
.imgB1 {
  z-index: 3;
}

<img class = "imgA1" src = "https://placehold.it/200/333333">
<img class = "imgB1" src = "https://placehold.it/100">

Источник

Вот код, который может дать вам идеи:

<style>
.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 
</style>

<div class = "containerdiv">
    <img border = "0" src = "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt = """>
    <img class = "cornerimage" border = "0" src = "http://www.gravatar.com/avatar/" alt = "">
<div>

JSFiddle

Я подозреваю, что Решение Эспо может быть неудобным, потому что он требует от вас абсолютно позиционировать оба изображения. Вы можете захотеть, чтобы первая позиционировалась в потоке.

Обычно есть естественный способ сделать это - CSS. Вы помещаете position: relative в элемент контейнера, а затем полностью размещаете дочерние элементы внутри него. К сожалению, вы не можете поместить одно изображение внутрь другого. Вот почему мне понадобился контейнерный div. Обратите внимание, что я сделал его плавающим, чтобы он автоматически соответствовал своему содержимому. Заставить его отображать: inline-block теоретически тоже должно работать, но поддержка браузеров там оставляет желать лучшего.

Обновлено: Я удалил атрибуты размера из изображений, чтобы лучше проиллюстрировать свою точку зрения. Если вы хотите, чтобы у образа контейнера были размеры по умолчанию, и вы не знаете размер заранее, вы не можете использовать фоновый трюк. Если вы это сделаете, это лучший способ пойти.

Встроенный стиль здесь только для ясности. Используйте настоящую таблицу стилей CSS.

<!-- First, your background image is a DIV with a background 
     image style applied, not a IMG tag. -->
<div style = "background-image:url(YourBackgroundImage);">
    <!-- Second, create a placeholder div to assist in positioning 
         the other images. This is relative to the background div. -->
    <div style = "position: relative; left: 0; top: 0;">
        <!-- Now you can place your IMG tags, and position them relative 
             to the container we just made -->   
        <img src = "YourForegroundImage" style = "position: relative; top: 0; left: 0;"/>
    </div>
</div>

@ buti-oxa: Не буду педантичным, но ваш код недействителен. Атрибуты HTML width и height не допускают единиц измерения; вы, вероятно, думаете о свойствах CSS width: и height:. Вы также должны указать тип содержимого (text/css; см. Код Espo) с тегом <style>.

<style type = "text/css"> 
.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 
</style>

<div class = "containerdiv">
    <img border = "0" src = "http://www.gravatar.com/avatar/" alt = "" width = "100" height = "100">
    <img class = "cornerimage" border = "0" src = "http://www.gravatar.com/avatar/" alt = "" width = "40" height = "40">
<div>

Если оставить px; в атрибутах width и height, то механизм рендеринга может перестать работать.

Хорошо, через некоторое время вот на что я остановился:

.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px green solid;
}

<div class = "parent">
  <img class = "image1" src = "https://placehold.it/50" />
  <img class = "image2" src = "https://placehold.it/100" />
</div>

Как самое простое решение. То есть:

Создайте относительный div, который помещается в поток страницы; поместите базовое изображение первым как относительное, чтобы div знал, насколько он должен быть большим; разместите наложения как абсолютные относительно левого верхнего угла первого изображения. Уловка состоит в том, чтобы правильно определить родственников и абсолютов.

Одна проблема, которую я заметил, которая может вызвать ошибки, заключается в том, что в ответе rrichter код ниже:

<img src = "b.jpg" style = "position: absolute; top: 30; left: 70;"/>

должен включать единицы пикселей в стиле, например.

<img src = "b.jpg" style = "position: absolute; top: 30px; left: 70px;"/>

В остальном ответ работал нормально. Спасибо.

Вы можете абсолютно позиционировать pseudo elements относительно их родительского элемента.

Это дает вам два дополнительных слоя, с которыми можно поиграть для каждого элемента - так что размещение одного изображения поверх другого становится простым - с минимальной и семантической разметкой (без пустых div и т. д.).

разметка:

<div class = "overlap"></div>

css:

.overlap
{
    width: 100px;
    height: 100px;
    position: relative;
    background-color: blue;
}
.overlap:after
{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 5px;
    left: 5px;
    background-color: red;
}

Вот такой ЖИВАЯ ДЕМО

Может быть, немного поздно, но для этого вы можете:

HTML

<!-- html -->
<div class = "images-wrapper">
  <img src = "images/1" alt = "image 1" />
  <img src = "images/2" alt = "image 2" />
  <img src = "images/3" alt = "image 3" />
  <img src = "images/4" alt = "image 4" />
</div>

SASS

// In _extra.scss
$maxImagesNumber: 5;

.images-wrapper {
  img {
    position: absolute;
    padding: 5px;
    border: solid black 1px;
  }

  @for $i from $maxImagesNumber through 1 {
    :nth-child(#{ $i }) {
      z-index: #{ $maxImagesNumber - ($i - 1) };
      left: #{ ($i - 1) * 30 }px;
    }
  }
}

Создайте относительный div, который помещается в поток страницы; поместите базовое изображение первым как относительное, чтобы div знал, насколько он должен быть большим; разместите наложения как абсолютные относительно левого верхнего угла первого изображения. Уловка состоит в том, чтобы правильно определить родственников и абсолютов.