элементы позиционирования по сравнению с их контейнером

При создании сложных макетов с использованием HTML и CSS часто необходимы точно позиционировать элементы относительно их контейнера. Совместимость и обслуживаемость кросс-браузера являются важными соображениями при выборе соответствующего метода позиционирования.

абсолютное положение

CSS может выполнять это с использованием абсолютного позиционирования (положение: абсолютное), который позиционирует элемент, относительно его ближайший позиционированный родительский контейнер. Если позиционированный родитель нет, элемент позиционируется относительно окна браузера. позиция: относительно; высота: 100px; } #коробка { позиция: абсолютно; Верх: 50px; Слева: 20px; }

В этом примере элемент #box будет расположен 50PX из верхней и 20px слева от его #Container Parent. Без позиционированного родителя элемент будет расположен относительно окно браузера.

walfers:

#container {
  position: relative;
  height: 100px;
}

#box {
  position: absolute;
  top: 50px;
  left: 20px;
}

допускает точное размещение элементов по сравнению с любым позиционированным предком

не влияет на поток других элементов

• Соображения режима Quirks:
]
абсолютное позиционирование так же работает как в режиме стандартов, так и в режиме Quirks, кроме:

в режиме причудли Elements.

рентабельности и прокладки могут вести себя по -разному в режиме Quirks.

Советы для чистого и поддерживаемого кода:

• . Согласованные и намекающие на конвенции для контейнеров и их положений. Отдельный лист стиля или в выделенном разделе основного листа стиля.

рассмотрите возможность использования CSS Grid или Flexbox для более сложных макетов, поскольку они обеспечивают дополнительное управление и гибкость.

]