CSS Positioning — это мощный инструмент для точного контроля расположения элементов на странице. В этом руководстве вы изучите все виды позиционирования с интерактивными примерами.
Positioning идеально подходит для:
CSS Positioning — это модуль CSS, который позволяет точно контролировать расположение элементов относительно их нормального положения или других элементов.
static — нормальный поток (по умолчанию)relative относительно нормального положенияabsolute относительно ближайшего позиционированного родителяfixed относительно viewportsticky гибрид relative и fixedposition: static — это значение по умолчанию. Элемент находится в нормальном потоке документа.
При static свойства top, right, bottom, left и z-index не работают.
position: relative позиционирует элемент относительно его нормального положения.
Свойства top, right, bottom, left смещают элемент от его исходной позиции.
Важно: элемент сохраняет своё место в потоке!
.box {
position: relative;
top: 20px;
left: 30px;
background: #667eea;
color: white;
padding: 20px;
}position: absolute удаляет элемент из нормального потока и позиционирует его относительно ближайшего позиционированного родителя (не static).
Если такого родителя нет, элемент позиционируется относительно <html>.
Важно: элемент НЕ сохраняет своё место в потоке!
.container {
position: relative;
height: 200px;
background: #f0f0f0;
}
.box {
position: absolute;
top: 20px;
right: 20px;
background: #667eea;
color: white;
padding: 15px;
}position: fixed позиционирует элемент относительно viewport (окна браузера).
Элемент остаётся на месте при скролле страницы.
Идеально для:
.fixed-button {
position: fixed;
bottom: 20px;
right: 20px;
background: #667eea;
color: white;
padding: 15px 25px;
border-radius: 50px;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}position: sticky — это гибрид relative и fixed.
Элемент ведёт себя как relative, пока не достигнет определённой позиции при скролле, затем становится fixed.
Обязательно нужно указать top (или другое свойство).
Контент 1
Контент 2
Контент 3
Контент 4
Контент 5
.sticky-header {
position: sticky;
top: 0;
background: #667eea;
color: white;
padding: 15px;
z-index: 10;
}z-index управляет порядком наложения позиционированных элементов (не static).
Stacking context — это трёхмерная концепция наложения элементов по оси Z.
Новый stacking context создаётся:
position не static и z-index не autoopacity меньше 1transform не none.box1 {
position: absolute;
z-index: 1;
background: #667eea;
}
.box2 {
position: absolute;
z-index: 2;
background: #f093fb;
}
.box3 {
position: absolute;
z-index: 3;
background: #4facfe;
}Рассмотрим несколько практических примеров использования positioning.