Summary - Header layout
Build a header layout with display and position properties.
Plan for a header layout
In this summary you combine display and position concepts and build a header layout. A header usually holds a title, a menu and a badge; each piece wants different display and position values.
Plan: first the header wrapper takes position: relative; then the menu is laid out with display: inline-block; finally the badge is pinned to the top-right corner with position: absolute.
Three concepts working together
In this layout three concepts interlock. display: inline-block lays menu items side by side while still allowing width and height. position: relative makes the wrapper the containing block for the position: absolute badge.
So the badge sits in the wrapper's top-right corner via top: 0 and right: 0. The three declarations work as one.
Exercise Build the header shell
Write a header.top class selector and assign three declarations: position: relative, padding: 1rem, background: whitesmoke. The header shell then becomes the containing block for the badge.
Show example solution
/* header shell */
header.top {
position: relative;
padding: 1rem;
background: whitesmoke;
}Exercise Add the menu and badge styles
Add two style blocks. First a header.top nav a descendant selector with display: inline-block and padding: 0.25rem 0.5rem. Second a header.top .badge descendant selector with position: absolute, top: 0, right: 0.
Show example solution
/* menu and badge styles */
header.top nav a {
display: inline-block;
padding: 0.25rem 0.5rem;
}
header.top .badge {
position: absolute;
top: 0;
right: 0;
}Test yourself
-
Where does the badge stick in this layout?
header.top { position: relative; } header.top .badge { position: absolute; top: 0; right: 0; }- Top-left corner of the browser window
- Its own place in the document flow
- Top-right corner of the header.top wrapper
- At the bottom of the page
Show answer
Top-right corner of the header.top wrapper — Correct. Since header.top is position: relative, it is the badge's containing block; top:0 right:0 places it at the top-right corner.