JavaScript Curriculum
Display and Positioning
mediumThe coffee shop page needs a sticky header that stays visible while scrolling, a badge overlaid on the menu card images, and a dropdown nav — all requiring precise positioning.
Display and Positioning
Two CSS properties control where elements live on the page and how they relate to each other: display and position. Together they unlock every layout pattern.
display — How Elements Participate in Flow
The display property determines how an element generates boxes and participates in the document flow:
Takes up the full width available. Starts on a new line. Width, height, margin, padding all work as expected. Default for: div, p, h1-h6, section, article, header, footer.
.element {
display: block;
}position — Where Elements Are Placed
Position controls which coordinate system an element uses and whether it stays in normal document flow:
The default. Element flows in normal document order. top/right/bottom/left and z-index have no effect.
.element {
position: static; /* default, never needed */
}z-index — Controlling Stacking Order
When elements overlap, z-index controls which one appears on top. Higher numbers win — but only for positioned elements:
Your Challenge
Build a fixed header with z-index layering, and add absolute-positioned badges to the menu cards.
Challenge
Make the header position: fixed at the top of the page. Add a position: absolute badge in the top-right corner of each .card (which needs position: relative). Give the header a z-index of 100 so it layers above everything. Add padding-top to body equal to the header height so content isn't hidden behind it.
Display and Positioning
mediumThe coffee shop page needs a sticky header that stays visible while scrolling, a badge overlaid on the menu card images, and a dropdown nav — all requiring precise positioning.
Display and Positioning
Two CSS properties control where elements live on the page and how they relate to each other: display and position. Together they unlock every layout pattern.
display — How Elements Participate in Flow
The display property determines how an element generates boxes and participates in the document flow:
Takes up the full width available. Starts on a new line. Width, height, margin, padding all work as expected. Default for: div, p, h1-h6, section, article, header, footer.
.element {
display: block;
}position — Where Elements Are Placed
Position controls which coordinate system an element uses and whether it stays in normal document flow:
The default. Element flows in normal document order. top/right/bottom/left and z-index have no effect.
.element {
position: static; /* default, never needed */
}z-index — Controlling Stacking Order
When elements overlap, z-index controls which one appears on top. Higher numbers win — but only for positioned elements:
Your Challenge
Build a fixed header with z-index layering, and add absolute-positioned badges to the menu cards.
Challenge
Make the header position: fixed at the top of the page. Add a position: absolute badge in the top-right corner of each .card (which needs position: relative). Give the header a z-index of 100 so it layers above everything. Add padding-top to body equal to the header height so content isn't hidden behind it.