Use `position: relative` when an element needs to anchor an absolutely positioned child without leaving its own place in the layout. On its own, the declaration usually causes no visible movement: the element stays in normal document flow, and surrounding elements keep their positions. section 6.3
Nudging an element
Given four inline-block elements, `position: relative; top: 1em; left: 2em` moves the second one down and right from its original position. The other three still flow around the space it originally occupied, so the shifted element can overlap them. Negative offsets work too. Offsets shift a relatively positioned element; they do not resize it. section 6.3
The more reusable pattern is an anchor: give a container `position: relative`, then give its child `position: absolute`. The container becomes the child’s containing block. Unlike the container, the absolutely positioned child can appear over nearby content without making that content move. section 6.3 section 6.3.1
Anchor a dropdown to its toggle
Set `.dropdown { display: inline-block; position: relative; }` and `.dropdown-menu { display: none; position: absolute; left: 0; top: 2.1em; min-inline-size: 100%; }`. A click handler toggles `is-open`, and `.dropdown.is-open .dropdown-menu { display: block; }` reveals the menu below the button. At the right edge of a viewport, use `right: 0` instead of `left: 0` so a wide menu extends leftward. 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 complete dropdown styles show the relative container, absolute menu, and open-state rule together. section 6.3.1
This anchor pattern also works for a mobile menu: a relatively positioned menu contains an absolutely positioned toggle pulled upward into the header and a dropdown aligned to the menu. Positioning can affect which overlapping element appears in front; when that becomes a problem, examine stacking order and `z-index` rather than moving a flow-dependent element elsewhere in the markup. section 7.1.1 section 6.4.1
