Як CSS керує положенням елементів на сторінці?
CSS керує положенням елементів за допомогою трьох основних механізмів:
1) Потік документа (normal flow)
Це типова поведінка. Елементи розташовуються один за одним зверху вниз і зліва направо.
Інструменти, що впливають на позицію в потоці:
display(block, inline, flex, grid)margin,padding,borderwidth,height
2) Позиціонування (position)
Дозволяє керувати координатами відносно інших елементів або вікна браузера.
Режими:
position | Особливість |
|---|---|
static | звичайний потік, без координат |
relative | залишається в потоці, але можна зміщувати |
absolute | поза потоком, позиціонується по предку |
fixed | фіксується відносно вікна |
sticky | «прилипає» під час скролу |
Використовуються координати: top, right, bottom, left.
3) Сучасні системи розкладки
Дозволяють задавати чітке розташування елементів усередині контейнера.
| Модель | Властивість |
|---|---|
| Flexbox | display: flex |
| Grid | display: grid |
Flex - для одновимірних розкладок (у рядок або колонку). Grid - для двовимірних сіток.
Підсумок: CSS керує положенням елементів через потік документа, позиціонування та системи розкладки (flex і grid), а також через розміри й відступи, що впливають на їхнє розташування.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.