Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Як CSS керує положенням елементів на сторінці?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

CSS керує положенням елементів за допомогою трьох основних механізмів:

---

### **1) Потік документа (normal flow)**

Це типова поведінка. Елементи розташовуються один за одним зверху вниз і зліва направо.

Інструменти, що впливають на позицію в потоці:

- `display` (block, inline, flex, grid)
- `margin`, `padding`, `border`
- `width`, `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), а також через розміри й відступи, що впливають на їхнє розташування.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати190 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.