Установите максимальную ширину для div с дочерними элементами в абсолютном

У меня есть корневой div с максимальной шириной, а затем контейнер и несколько дочерних элементов в абсолютном значении.

.root {
  background-color: tomato;
  max-width: 400px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  position: relative;
}

.item {
  background-color: steelblue;
  width: 100px;
  height: 100px;
  position: absolute;
}

<div class = "root">
    <div class = "container ">
        <div class = "item" style = "top: 0px; left: 0px"></div>
        <div class = "item" style = "top: 0px; left: 110px"></div>
      <div class = "item" style = "top: 0px; left: 220px"></div>
        <div class = "item" style = "top: 110px; left: 0px"></div>
    </div>
</div>

Почему не виден томатный фон? Почему этот div имеет высоту = 0?

Чего я хочу добиться, так это корневого div с максимальной шириной, а затем некоторых дочерних элементов в абсолютной позиции, которые не переполняют родительский div

html css

21.03.2022 08:23

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

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

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Замени height на .root100% на 100vh

.root {
  background-color: tomato;
  max-width: 400px;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  position: relative;
}

.item {
  background-color: steelblue;
  width: 100px;
  height: 100px;
  position: absolute;
}

<div class = "root">
    <div class = "container ">
        <div class = "item" style = "top: 0px; left: 0px"></div>
        <div class = "item" style = "top: 0px; left: 110px"></div>
      <div class = "item" style = "top: 0px; left: 220px"></div>
        <div class = "item" style = "top: 110px; left: 0px"></div>
    </div>
</div>

21.03.2022 08:32

Ответ принят как подходящий

У вашего корня нет высоты. Когда вы устанавливаете абсолютную позицию своих предметов, вы удален элемент из обычного потока документов, и для элемента не создается место в макете страницы

21.03.2022 08:35

.root {
  background-color: tomato;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
 
}

.item {
  background-color: steelblue;
  width: 100px;
  height: 100px;
  position: absolute;
}

<div class = "root">
    <div class = "container ">
        <div class = "item" style = "top: 0px; left: 0px"></div>
        <div class = "item" style = "top: 0px; left: 110px"></div>
      <div class = "item" style = "top: 0px; left: 220px"></div>
        <div class = "item" style = "top: 110px; left: 0px"></div>
    </div>
</div>

21.03.2022 08:36

Другие вопросы по теме

Динамическое назначение цвета фона и цвета рамки кнопкам в angular

Проблема с использованием IntersectionObserver для запуска анимации CSS

Как изменить порядок отображения одного из элементов по отдельности, используя flex

Входная группа Bootstrap5 с btn-group-vertical

Как исправить ширину изменяющейся текстовой метки диапазона ввода

Javascript Canvas — CSS-вращающиеся элементы холста оставляют пустые места между -- круговое меню

Неупорядоченный список HTML с количеством столбцов> 1

Можно ли создать контейнер div в форме папки с помощью CSS

Есть ли способ анимировать появляющийся текст в html/css?

Как я могу упростить объекты в CSS или JS для определенных элементов?

Установите максимальную ширину для div с дочерними элементами в абсолютном

Ответы 3

Другие вопросы по теме

Похожие вопросы