position контролирует, как позиционируется элемент и применяются ли свойства смещения (top/right/bottom/left).
css
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
absolute позиционирует элемент относительно его ближайшего позиционированного предка (все, кроме static). Вы устанавливаете position: relative на родителя, чтобы сделать его точкой отсчета:
.card {
position: relative; /* becomes the positioning context */
}
.badge {
position: absolute; /* positioned relative to .card */
top: 8px;
right: 8px; /* pins the badge to the card's top-right corner */
}
Этот паттерн relative-parent / absolute-child встречается везде: значки, выпадающие меню, подсказки, кнопки закрытия.
.navbar { position: fixed; top: 0; } /* stays put on screen while scrolling */
.section-header { position: sticky; top: 0; } /* scrolls with content, then sticks at top */
top: 0), затем остается на месте, пока его контейнер виден — отлично для заголовков секций.Элементы absolute/fixed удаляются из нормального потока, поэтому они не занимают место — соседние элементы ведут себя так, как будто их там нет, что может привести к наложению. Планируйте это (например, добавьте padding для компенсации fixed панели навигации).
position необходим для оверлеев, sticky заголовков, модалей, выпадающих меню и значков.
Отношение relative-parent/absolute-child и различие между fixed и sticky — это практическое ядро, которое вы постоянно используете.