Two Separate Questions
display answers "how does this element behave among its siblings?" position answers "where does this element sit, and relative to what?" They're often confused because both affect layout, but they control different things.
- ✓display controls whether an element starts a new line and whether width/height apply.
- ✓position controls how an element is placed — in normal flow, or removed from it.
- ✓z-index only matters between elements that are already stacked on top of each other.
block, inline & inline-block
Starts on a new line and takes the full available width. width/height apply fully.
Flows within the text line. width/height are ignored; only horizontal padding/margin work reliably.
Flows inline like text, but respects width/height and vertical spacing — the best of both.
Removes the element entirely — no space is reserved for it.
static, relative, absolute & fixed
The default. Normal document flow — top/left/right/bottom have no effect.
Stays in normal flow, but top/left/etc. nudge it from where it would normally sit.
Removed from flow entirely; positioned relative to its nearest positioned ancestor.
Removed from flow; positioned relative to the browser viewport, stays put while scrolling.
/* Parent must be "positioned" for absolute children to anchor to it */ .card { position: relative; } /* Badge pinned to the card's top-right corner */ .badge { position: absolute; top: 12px; right: 12px; } /* Header that stays visible while the page scrolls */ .site-header { position: fixed; top: 0; width: 100%; }
An absolutely positioned element anchors to its nearest ancestor that has position set to anything other than static. Forgetting to set position: relative on the parent is the most common bug beginners hit here.
Controlling Stacking Order
When two positioned elements overlap, z-index decides which one appears on top. Higher values stack above lower ones. z-index only has an effect on elements that already have a position value other than static.
.card-1 { position: absolute; z-index: 1; } .card-2 { position: absolute; z-index: 2; } .card-3 { position: absolute; z-index: 3; } /* card-3 renders above card-2, which renders above card-1 */
z-index Without position
Breaking Down What You Just Learned
displayblock, inline, and inline-block control how an element flows among its siblings.
position: relativeStays in flow but can be nudged, and becomes an anchor for absolute children.
position: absoluteRemoved from flow, positioned relative to its nearest positioned ancestor.
position: fixedAnchored to the viewport, stays visible while the page scrolls.
z-indexControls stacking order between overlapping positioned elements — higher wins.
Try It Yourself
Build a card with position: relative, then add a small "New" badge inside it using position: absolute anchored to the top-right corner. Add a second overlapping badge and use z-index to control which sits on top.
Build a Sticky Header With a Badge
Combining display, position, and z-index in one page
Create day20.html linked to a stylesheet and build a small page with a fixed header.
- Build a header with position: fixed; top: 0; that stays visible while scrolling.
- Add enough paragraph content below it to make the page scrollable.
- Build a product card with position: relative and an absolutely positioned "Sale" badge in one corner.
- Overlap two badges on the same card and use z-index to control which one shows on top.
- Switch a row of buttons from display: block to inline-block and compare how they lay out.
Recap
block, inline, and inline-block control flow among sibling elements.
static, relative, absolute, and fixed control placement and flow removal.
Absolute children anchor to the nearest non-static ancestor.
Only works on positioned elements; higher values stack above lower ones.
Key Takeaways
- display controls how an element behaves in the flow of the page relative to its siblings.
- inline-block combines inline flow with support for width, height, and vertical spacing.
- position: relative keeps an element in flow while enabling it to anchor absolute children.
- position: absolute and fixed remove an element from normal flow entirely.
- z-index only affects positioned elements, and higher values render above lower ones.