Fixed positioning places an element relative to the browser window and keeps it in place while the rest of the page scrolls. Think of a footer that refuses to leave the screen. section 8.10
Use fixed positioning to:
- Set position: fixed to remove the element from normal page flow and anchor it in the viewport. section 8.7
- Combine bottom: 0 or top: 0 with a fixed element to place it against a viewport edge. section 8.10 section 15.8
- Adjust z-index when overlapping elements need a deliberate front-to-back order. section 8.10 section 8.7
A footer that stays put
In a photo gallery, set the footer to position: fixed and bottom: 0. Because the footer can cover the final content, give main padding-bottom equal to the footer height, such as 3.5em. section 15.8
main {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-content: flex-start;
flex-grow: 1;
max-width: 960px;
padding-bottom: 3.5em; #1
}
footer {
display: flex;
justify-content: center;
align-items: center;
position: fixed; #2
bottom: 0; #3
width: 100%;
text-transform: uppercase;
background-color: #543437;
}
Browse the complete footer rule, including fixed positioning, bottom anchoring, full width, and the matching main-element clearance. section 15.8
