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

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

Я просто хочу расположить перекрывающиеся изображения относительно друг друга.

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

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

.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 знал, насколько оно должно быть большим; поместите наложения как абсолютные значения относительно верхнего левого угла первого изображения. Хитрость заключается в том, чтобы исправить родственников и абсолют.

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

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

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

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

РЕДАКТИРОВАТЬ: я удалил атрибуты размера из изображений, чтобы лучше проиллюстрировать мою точку зрения. Если вы хотите, чтобы изображение контейнера имело размеры по умолчанию, и вы не знаете размер заранее, вы не можете использовать фоновый прием . Если вы это сделаете, это лучший путь.

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

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

Вот живая демонстрация

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

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

Встроенный стиль только для наглядности здесь. Используйте настоящую таблицу стилей 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>

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

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

@ 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атрибутах могут вызвать движок рендеринга на межу.

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