Suggest an edit

Improve this article

Refine the answer for “How does CSS control the position of elements on a page?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

CSS controls the position of elements using three main mechanisms:

---

### **1) Document flow (normal flow)**

This is the default behavior. Elements are placed one after another from top to bottom and left to right.

Tools that affect position within the flow:

- `display` (block, inline, flex, grid)
- `margin`, `padding`, `border`
- `width`, `height`

---

### **2) Positioning (**`position`**)**

Lets you control coordinates relative to other elements or the browser window.

Modes:

| `position` | Feature |
|---|---|
| `static` | normal flow, no coordinates |
| `relative` | stays in the flow, but can be shifted |
| `absolute` | outside the flow, positioned relative to an ancestor |
| `fixed` | fixed relative to the window |
| `sticky` | "sticks" on scroll |

The coordinates used are: `top`, `right`, `bottom`, `left`.

---

### **3) Modern layout systems**

They let you define precise placement of elements within a container.

| Model | Property |
|---|---|
| Flexbox | `display: flex` |
| Grid | `display: grid` |

Flex - for one-dimensional layouts (row or column).
Grid - for two-dimensional grids.

---

**Summary:** CSS controls the position of elements through document flow, positioning, and layout systems (flex and grid), as well as through sizes and spacing that affect their placement.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts213 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.