A dropdown should open over the page, not push the heading below it downward. Absolute positioning makes that possible: the positioned element leaves normal flow, and its edges can be placed within a containing block. Unlike fixed positioning, which uses the viewport, absolute positioning ordinarily uses the nearest positioned ancestor. section 6.2 section 6.3.1
Set position: absolute on the element, then use inset properties such as top, right, bottom, and left to place its edges. To choose its reference point, set position: relative on the intended ancestor. The browser searches past any unpositioned parent to find the nearest positioned ancestor. If it finds none, it uses the initial containing block: a viewport-sized area anchored at the top of the page. section 6.2 section 6.2.1
Place a Close button on a modal
A fixed-positioned modal body provides the containing block for its Close button. Give the button position: absolute; top: 0.3em; right: 0.3em to place it near the modal’s upper-right corner. If the visible button should be an ×, keep meaningful Close text in the HTML for screen readers. Hide the text visually, then add the × with an absolutely positioned ::after pseudo-element inside the button. section 6.2.1 section 6.2.2
Open a dropdown without moving the page
Put a toggle button and menu inside a dropdown container. Set the container to position: relative and the menu to position: absolute; left: 0; top: 2.1em. The menu then opens below the toggle, in front of nearby content, without shifting it. Hide the menu by default; a click handler toggles an is-open class that displays it. A click-controlled menu also works for keyboard and touchscreen users, unlike a hover-only approach. section 6.3.1
Listing 6.9 Displaying the open dropdown menu
.dropdown {
display: inline-block;
position: relative; #1
}
.dropdown-toggle {
padding: 0.5em 1.5em;
border: 1px solid #ccc;
background-color: #eee;
border-radius: 0;
}
.dropdown-menu {
display: none; #2
position: absolute;
left: 0;
top: 2.1em; #3
inline-size: max-content;
min-inline-size: 100%;
background-color: #eee;
}
.dropdown.is-open .dropdown-menu { #4
display: block; #4
} #4
.submenu {
padding-inline-start: 0;
margin: 0;
list-style-type: none;
border: 1px solid #999;
}
.submenu > li + li {
border-top: 1px solid #999;
}
.submenu > li > a {
display: block;
padding: 0.5em 1.5em;
background-color: #eee;
color: #369;
text-decoration: none;
}
.submenu > li > a:hover {
background-color: #fff;
}
The dropdown styles show the relative-positioned container, absolute-positioned menu, inset values, and open-state rule together. section 6.3.1
The same pattern can pull a mobile menu button upward so it appears inside a header even when its navigation element follows the header in the markup. Placement does not settle which overlapping element appears on top, though. If a dropdown covers a modal unexpectedly, inspect stacking order and z-index rather than assuming a different top or right value will fix it. section 7.1.1 section 6.4.1
