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

Так, после некоторого времени, вот на чем я остановился:

.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 70px;
}

<div class="parent">


</div>

как самое простое решение. А именно:

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

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

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

Источник

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

.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 


<div class="containerdiv">

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

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

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

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

Это дает вам два дополнительных слоя для игры с каждым элементом - так что позиционирование одного изображения поверх другого становится простым - с минимальной и семантической разметкой (без пустых 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;
}

Вот [LIVE DEMO][1]

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

<div style="background-image:url(YourBackgroundImage);">

    <div style="position: relative; left: 0; top: 0;">


    </div>
</div>

Простой способ сделать это - использовать background-image, а затем просто поместить в этот элемент.

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

Возможно, это немного поздно, но для этого вы можете сделать:

HTML

<div class="images-wrapper">
  ![image 1](images/1)
  ![image 2](images/2)
  ![image 3](images/3)
  ![image 4](images/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;
    }
  }
}

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

.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 


<div class="containerdiv">


<div>

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