Верстка наложенных объектов

Question

Имееться вот такой вот блок :
Не очень понимаю как его сверстать . Хотел сделать через флексы , а потом просто использовать минусовый margin,но тогда будет очень проблемно центрировать картинки 556x300.
Вопрос: В какую сторону мне посмотреть ? Что тут можно использовать?

Answer 1

На мой взгляд, всё очень просто, с помощью позиционирования position : relative и absolute. И не нужно изобретать велосипед. Пример ниже. Размеры элементов, а также значения их положения относительно родительского элемента несложно заменить на нужные под себя.

.container {
  position: relative;
  width: 300px;
  margin: 0 auto;
  margin-top: 50px;
}

.item {
  position: relative;
  width: 300px;
  height: 100px;
  border: 1px solid black;
}

.item__abs {
  position: absolute;
  width: 300px;
  height: 100px;
  border: 1px solid red;
}

.item__abs:nth-child(1) {
  top: -20px;
  left: -200px;
}

.item__abs:nth-child(2) {
  top: 80px;
  right: -200px;
}

.item__abs:nth-child(3) {
  top: 180px;
  left: -200px;
}

.item__abs:nth-child(4) {
  top: 280px;
  right: -200px;
}

<div class="container">

  <div class="item__abs"></div>
  <div class="item__abs"></div>
  <div class="item__abs"></div>
  <div class="item__abs"></div>

  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>

</div>

БЛОГ НА HUSL

Верстка наложенных объектов

Ответы (1 шт):