Suggest an editImprove this articleRefine the answer for “How does display affect the behavior of positioned elements?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**`display`** and `position` are responsible for different tasks: `display` does not control the fact of positioning itself, but determines how the element behaves before offsets are applied and how it participates in the flow, if it stays in it. **Key point:** `display` controls the box model and behavior in the flow, while `position` controls coordinates and falling out of the flow; when an element falls out of the flow, `display` only describes its internal model.Shown above the full answer for quick recall.Answer (EN)Image`display` and `position` are responsible for different tasks, so **display does not control the fact of positioning itself**, but it affects **how the element behaves before positional offsets are applied** and **how it participates in the flow**, if it stays in it. --- ### **1) With** `position: static` **(default)** The element fully follows `display`: | display | behavior | |---|---| | `block` | takes up the whole line | | `inline` | flows within the line | | `inline-block`, `flex`, `grid` | behave according to their own model | --- ### **2) With** `position: relative` The element **stays in the flow**, so `display` continues to fully determine its behavior: - `relative + block` → a block with an offset - `relative + inline` → an inline element with an offset - `relative + flex/grid` → a grid container that can be shifted **The offset only affects the visual appearance, but the box type stays the same.** --- ### **3) With** `position: absolute` **and** `fixed` The element **falls out of the flow**, so `display` only affects its "shape," not the surrounding elements. For example: | display | what happens for absolute/fixed | |---|---| | `block` | behaves like a block rectangle | | `inline` | turns into an "inline-box", but coordinate positioning still dominates | | `flex` / `grid` | continues to be a flex/grid container, but is still outside the flow | **Summary:** for `absolute` and `fixed`, `display` no longer controls placement among neighbors, only the model of the internal content. --- ### **4) With** `position: sticky` The element stays in the flow (like `relative`) → `display` fully applies until the element sticks. After sticking, it visually behaves like `fixed`, but in the flow it is still accounted for according to the rules of its `display`. --- ### **Short summary** | position | does `display` affect participation in the flow | |---|---| | `static` | yes | | `relative` | yes | | `sticky` | yes (until it sticks) | | `absolute` | no (only shape, not flow) | | `fixed` | no (only shape, not flow) | **Main idea:** `display` controls the box model and behavior in the flow, while `position` controls coordinates and falling out of the flow. When an element falls out, `display` describes only its internal model, not its placement among other elements.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.