Расположение детей внутри контейнера CSS: absolute, relative

Быстрый ответ

Для того чтобы элемент с абсолютным позиционированием (position: absolute) учитывал ограничения родительского элемента, родитель не должен находиться в статическом позиционировании (position: static), которое является значением по умолчанию. Установите для родителя position: relative. Это позволит позиционировать дочерний элемент относительно родительского. Вот пример кода на CSS:

.parent {
    position: relative; /* Теперь я предоставляю контекст для позиционирования своего дочернего элемента. 😎 */
}

.child {
    position: absolute; /* Я позиционируюсь относительно моего родителя. 🤓 */
    top: 10px; /* Отступ сверху от края родителя составляет 10 пикселей. 📏 */
    left: 10px; /* Та же ситуация с левым краем. Время двигаться! 🕺 */
}

Элемент с классом .child будет расположен на отметке 10 пикселей от верхнего и левого краев элемента с классом .parent.

Переосмысление подходов к верстке

Принятие современных методов верстки

Воспользуйтесь современными CSS-фреймворками, такими как CSS Grid и Flexbox, для решения проблем, связанных с абсолютным позиционированием.

• Сеточные макеты: присваивайте элементам сеточные ячейки, не прибегая к использованию фиксированных высот.
• Flexbox: этот инструмент позволяет эффективно регулировать размещение элементов внутри одномерной раскладки.

Подробнее об этом расскажет наш спикер на видео

Применение overflow и clearfix

Используйте свойство overflow: hidden или метод clearfix для того, чтобы родительский элемент учитывал высоту абсолютно позиционированных дочерних элементов:

• overflow: hidden не только обрезает внешний контент, но и влияет на расчеты размеров родительского элемента.
• Клёвый\f — это способ борьбы с проблемами, возникающими при абсолютном позиционировании или обтекании дочерних элементов.

Использование масштабируемого элемента

Создайте элемент с атрибутом visibility: hidden, который поддерживает геометрию контейнера, оставляя его в стандартном потоке документа и обеспечивая стабильность вёрстки:

.placeholder {
   visibility: hidden; /* Хоть я и невидим, но место занимаю! 👻 */
   width: 0!important; /* Мне нужно минимальное пространство. Чем меньше, тем лучше! 😎 */
}

Визуализация

Давайте рассмотрим пример с position: absolute и родительским элементом без заданной высоты:

Структура            | Высота
📦 Родитель (📏?)    |   ?
🏗️ Потомок (📍abs)  |   📏 Задана

Несмотря на абсолютное позиционирование потомка, он функционирует автономно, словно отдельная конструкция.

🏗️ Высота потомка не влияет на 📦 родителя, потому что он находится вне обычного документного потока. Это напоминает дрона (🚁), который летает над парком (🌳🏞️🌳): пространство парка остается неизменным.

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

Устанавливаем 📏 высоту для 📦 родителя? – 🚁 продолжает летать, но теперь парк можно измерить.
Без 📏? – 🏞️🌳 Площадь парка автоматически рассчитывается. И вот вам понимание! 👓

Этот пример наглядно демонстрирует влияние абсолютного позиционирования на родительские элементы.

Продвинутая реализация макета

Сетка и Flexbox для позиционирования

Постройте позиционирование, используя Grid и Flexbox. Эти инструменты предоставляют гибкий контроль над расположением элементов без необходимости задавать фиксированные высоты:

.container {
  display: grid; /* Превращаем контейнер в сетку. Посмотрите, как это выглядит! 🎸 */
  grid-template-columns: repeat(4, 1fr); /* Создаем четыре колонки одинаковой ширины. 📏 */
  grid-auto-rows: minmax(100px, auto); /* Минимальная высота строки — 100px, максимальная — автоматическая. 🤟 */
  grid-gap: 10px; /* Зазор между ячейками. Дайте им дышать! 🌬️ */
}

.item {
  grid-column: 2 / span 2; /* Элемент начинается со второй колонки и занимает две колонки. Все понятно! 👍 */
}

Сохранение пропорций позиционированных медиа-элементов

Следите за сохранением пропорций медиа-элементов, таких как видео или изображения при абсолютном позиционировании. Это важно для поддержания отзывчивости и точности пропорций.

.aspect-ratio-box {
  position: relative;
  width: 100%; /* Подходящая ширина */
  padding-top: 56.25%; /* Соотношение сторон 16:9 обеспечит широкоформатный опыт просмотра! 🖥️ */
}

.aspect-ratio-box > .media {
  position: absolute; /* Наш родитель — это опорный пункт */
  top: 0; right: 0; bottom: 0; left: 0; /* Мы плотно присоединяемся ко всем краям. Что могут быть лучше таких обнимашек! 🤗 */
}

Полезные материалы

1. position – CSS: Cascading Style Sheets | MDN — детальное изучение свойств позиционирования в CSS.
2. Абсолютное позиционирование внутри относительного | CSS-Tricks — подробный анализ сочетания абсолютного и относительного позиционирования.
3. Полное руководство по Flexbox | CSS-Tricks — полезные рекомендации по работе с Flexbox.
4. CSS-layout – свойство position — исчерпывающий гид по механикам позиционирования в CSS.
5. Уроки по CSS-верстке — обучающий материал по вёрстке в CSS с наглядными примерами.