Абсолютная привязка CSS
- Предыдущая страница Относительная привязка CSS
- Следующая страница Флоат CSS
Элементы, установленные на абсолютное позиционирование, полностью удаляются из потока документа и позиционируются относительно их содержащего блока, который может быть другим элементом в документе или начальным содержащим блоком. Пространство, занимаемое элементом в обычном потоке, закрывается, как будто элемент原来 не существовал. После позиционирования элемента создается блоковый фрейм, независимо от того,何种类型的 фрейм он создавал в обычном потоке.
Абсолютная привязка CSS
Абсолютное позиционирование делает положение элемента независимым от потока документа, поэтому он не занимает места. Это отличается от относительного позиционирования, которое на самом деле рассматривается как часть модели позиционирования обычного потока, так как положение элемента относительно его положения в обычном потоке.
Другие элементы в обычном потоке_layout, как будто элемент с абсолютной позиционировкой не существует:
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
如图所示:
Положение элементов абсолютной привязки относительноближайшего расположенного предкаЕсли элемент не имеет расположенного предка, то его положение относительноНачальный контейнер.
Основная проблема при定位 заключается в запоминании смысла каждого типа定位. Поэтому, теперь давайте复习 то, что мы изучили: относительная привязка «относится к» начальной позиции элемента в документе, а абсолютная привязка «относится к» ближайшему расположенному предку, если нет расположенного предка, то «относится к» начальному контейнеру.
Комментарий:В зависимости от пользователя агента, начальным контейнером может быть канва или элемент HTML.
Совет:Поскольку рамки абсолютной привязки не связаны с потоком документа, они могут перекрывать другие элементы на странице. Это можно сделать, установив Атрибут z-indexЧтобы контролировать порядок расположения этих рамок.
Пример абсолютной привязки CSS
- Привязка: абсолютная привязка
- Этот пример демонстрирует, как использовать абсолютные значения для привязки элементов.
- Предыдущая страница Относительная привязка CSS
- Следующая страница Флоат CSS
