Як розташувати одне зображення поверх 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>

Як найпростіше рішення. Це є:

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

Це погляд босоніж на те, що я зробив, щоб плавати одне зображення над іншим.

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. Ви ставите позицію: відносно елемента контейнера, а потім абсолютно розміщуєте дітей всередині нього. На жаль, ви не можете помістити одне зображення всередину іншого. Ось чому мені знадобився контейнер дів. Зауважте, що я зробив це поплавцем, щоб зробити його автоматичним підключенням до його вмісту. Зробити його відображенням: вбудований блок також теоретично повинен працювати, але підтримка браузера там погана.

EDIT: Я видалив атрибути розміру із зображень, щоб краще проілюструвати свою точку зору. Якщо ви хочете, щоб зображення контейнера мали його розміри за замовчуванням, і ви раніше не знаєте розміру, ви не можете використовувати фоновий трюк . Якщо ви це зробите, це кращий шлях.

Одне з питань, який я помітив, що може спричинити помилки, полягає в тому, що у відповіді Ріхтера наведений нижче код:

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

повинні включати одиниці px у стилі, наприклад.

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

Ось ЖИВА ДЕМО

Найпростіший спосіб зробити це - використовувати фонове зображення, а потім просто поставити <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атрибутах, це може призвести до того, що механізм візуалізації порушить свою роботу.

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