12 lines
1.3 KiB
Plaintext
12 lines
1.3 KiB
Plaintext
---
|
|
title: What's the difference between a `relative`, `fixed`, `absolute`, `sticky` and `static`-ally positioned element?
|
|
---
|
|
|
|
A positioned element is an element whose computed `position` property is either `relative`, `absolute`, `fixed` or `sticky`.
|
|
|
|
- `static`: The default position; the element will flow into the page as it normally would. The `top`, `right`, `bottom`, `left` and `z-index` properties do not apply.
|
|
- `relative`: The element's position is adjusted relative to itself, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned).
|
|
- `absolute`: The element is removed from the flow of the page and positioned at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block. Absolutely-positioned boxes can have margins, and they do not collapse with any other margins. These elements do not affect the position of other elements.
|
|
- `fixed`: The element is removed from the flow of the page and positioned at a specified position relative to the viewport and doesn't move when scrolled.
|
|
- `sticky`: Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as `relative` positioned until it crosses a specified threshold, at which point it is treated as `fixed`-positioned.
|