Элемент содержит 2 других элемента. Как расположить один из них центрально?

Question

Не могу найти решения похожей проблемы. Есть 3 элемента, контейнер, содержащий 2 других элемента, изображение и диалоговое окно. Изображение должно располагаться слева, а диалог быть посередине контейнера, перед изображением. Пока что получилось добиться подобного эффекта применив к Dialog элементу top и left свойства, но этот метод работает некорректно и меня интересует, можно ли решить проблему используя flexbox или grid.

Вот так располагаются элементы:

<Paper>
    <img />
    <Dialog>
        Some content
    </Dialog>
</Paper>

В итоге должно выглядеть вот так:

Answer 1

Диалоговое окно можно центрировать как обычно при помощи flex/grid:

Paper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

А самой картинке задать абсолютно позиционирование в пределах родителя:

Paper > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: auto;
  z-index: -1; /* Чтобы картинка была позади диалогового окна */
}

А ещё можно задать картинку через background-image, и это буде правильно, если по смыслу картинка фоновая.

БЛОГ НА HUSL

Элемент содержит 2 других элемента. Как расположить один из них центрально?

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