Absolute positioning takes an element out of normal page flow, so it no longer reserves space there. Set `position: absolute` and use `top`, `left`, `right`, `bottom`, or `inset` to place it. Its position is calculated from the closest relatively positioned ancestor; without one, the page’s top-left corner is the reference point. section 9.5.1
Two details matter when placing an element:
- With no offset set, it appears where it normally would, but still takes up no space in the flow. section 9.5.1
- Without an explicit width, even a block-level element takes only the width it needs. A percentage width is calculated against the element it is positioned relative to. section 9.5.1
Layer the faces of a card
Give the card container `position: relative`. On hover-capable devices, set the back face to `position: absolute; top: 0; left: 0` to place it over the front. On devices without hover, show both faces instead. section 9.5.1
Keep mobile table headers available
A narrow checkout table can move its `thead` offscreen with `position: absolute; left: -9999rem`. Unlike `display: none`, this hides the headers visually without removing their information from assistive technologies. Cell labels can then come from `data-name` attributes. section 8.3.1
Listing 9.22 Positioning the back over the front
@media (hover: hover) {
.back {
position: absolute;
top: 0;
left: 0;
transform: rotateY(-180deg); #1
}
}
The media-query listing shows the offsets that stack a card’s back face over its front. section 9.5.1
Listing 8.17 Hiding the table headers
@media(max-width: 549px) {
...
thead {
position: absolute;
left: -9999rem;
}
}
The listing shows the offscreen positioning used for mobile table headers. section 8.3.1
