A containing block is the reference rectangle used to resolve an element’s dimensions and positions. Percentage heights refer to the containing block’s size, while positioned elements use it for inset offsets. section 3.3.2 section 6.2
The browser chooses a containing block according to the positioning context:
- Fixed-positioned elements use the viewport as their containing block. section 6.2
- Absolutely positioned elements use their closest positioned ancestor. section 6.2 section 6.2.1
- If no ancestor is positioned, an absolutely positioned element uses the initial containing block, sized like the viewport and anchored at the page top. section 6.2.1
- A positioned parent creates a local reference area for absolutely positioned children, while unpositioned ancestors are skipped. section 6.2.1 section 6.3.1
Anchoring a close button
A modal’s fixed-positioned body becomes the containing block for its absolutely positioned close button. Setting top: 0.3em and right: 0.3em places the button near the modal’s top-right corner. section 6.2.1
Creating a dropdown reference
Set the dropdown container to position: relative, then position its menu absolutely. The menu’s left: 0 aligns with the container, and top: 2.1em places it beneath the toggle without shifting page layout. section 6.3.1
Listing 6.5 Absolutely positioned Close button
.modal-close {
position: absolute; #1
top: 0.3em; #1
right: 0.3em; #1
padding: 0.3em;
}
Inspect the close-button rules that use absolute positioning and inset offsets within the modal’s containing block. section 6.2.1
