CSS Studio
Interactive Learning
position: absolute removes the element from flow. The parent collapses unless something else gives it height. absolute looks for the nearest positioned ancestor, not always the parent you are staring at.
Position & Display
absolute and fixed are positioned against an ancestor. relative stays in flow and just shifts. sticky toggles between the two while scrolling.
What people get wrong
position: absolute removes the element from flow. The parent collapses unless something else gives it height. absolute looks for the nearest positioned ancestor, not always the parent you are staring at.
- What is the difference between absolute and fixed?
- absolute is positioned against the nearest ancestor with a position other than static. fixed is positioned against the viewport and stays put while the page scrolls.
Position Mode
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Following is the target box.
(More content below to allow scrolling...)
Scroll down to test "Fixed" or "Sticky".
Notice how "Absolute" stays inside this dashed box (if parent is relative), while "Fixed" ignores the box and aligns to the window.