How does CSS control the position of elements on a page?
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,borderwidth,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.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.