CSS positioning
The five position values (static, relative, absolute, fixed, sticky), the reference element of a positioned box, top/right/bottom/left and stacking order with z-index.
- 22 cards
- 4 topics
- Free
The outline, topic by topic
Each topic is weighted the way the exam weighs it.
- Concepts
- Questions
- Sort and link
- Scenarios
A few cards from the deck
position: relative: what is it?
Show the answer
An element shifted by top, right, bottom or left from its normal place, which keeps occupying that place, and which serves as the reference for its absolute descendants.
Most often it is written with no offset, only to make a parent the reference of an
absolutechild.What is the badge placed relative to?
```html
<style>
.badge { position: absolute; top: 0; left: 0; }
</style>
<div class="a">
<div class="b">
<span class="badge">1</span>
</div>
</div>`- The top left corner of the page
- The top left corner of its parent .b
- The top left corner of .a, the highest ancestor
- Its normal place in the flow, with a zero offset
Show the answer
The top left corner of the page
No ancestor is positioned (all are
static), so the reference is the initial containing block, anchored at the page's top left corner. To attach the badge to.b, putposition: relativeon.b.A
position: absoluteelement is placed relative to the nearest … ancestor, that is, one whose position is not ….Show the answer
A
position: absoluteelement is placed relative to the nearest positioned ancestor, that is, one whose position is not static.Ancestors with
relative,absolute,fixedorstickycount. If none exists, the reference is the initial containing block: a viewport-sized rectangle placed at the top of the page.position: absolute: what is it?
Show the answer
An element taken out of the flow and placed relative to the nearest positioned ancestor; failing that, relative to the initial containing block, anchored at the top of the page.
Taken out of the flow, it no longer reserves space: its neighbours close up as if it did not exist. So the parent's height must be considered.
A table header is
position: sticky;but when scrolling it disappears with the rest instead of staying at the top. What is the cause?- No threshold is given: without
top: 0, sticky behaves like relative - sticky only works on whole tables, never on column headers
- sticky requires a z-index above 1000 to hold on screen while scrolling
- sticky is replaced by fixed as soon as the page scrolls vertically, but only on mobile
Show the answer
No threshold is given: without
top: 0, sticky behaves like relativeYou must say at what distance from the edge the element sticks:
top: 0for the top. Another common trap: a parent withoverflow: hiddenorautobecomes the reference scrolling area.- No threshold is given: without