CSS позиціонування та Flexbox

Position: static, relative, absolute, fixed, sticky

📖 Теорія

Властивість position керує потоком елементів:

static — за замовчуванням, у нормальному потоці документа.

relative — зміщується відносно свого нормального положення:
.box { position: relative; top: 10px; left: 20px; }
absolute — виривається з потоку, позиціонується відносно найближчого предка з position != static:

💡 Приклад коду

.parent { position: relative; }
.child { position: absolute; top: 0; right: 0; }

fixed — відносно вікна браузера, не рухається при скролі:
.navbar { position: fixed; top: 0; width: 100%; }

sticky — relative до певного порогу прокрутки, потім fixed:
.header { position: sticky; top: 0; }

← Попередній урок Наступний урок →