Relative positioning offsets an element from its normal position while preserving its place in the document flow. Set position: relative on an element, then use top, bottom, left, or right when a small adjustment is needed. section 7.1.3 section 9.2
A common layout pattern uses a relatively positioned parent with an absolutely positioned child. The child’s top and left coordinates are then measured from the nearest positioned ancestor, allowing one card face to sit directly over another. section 9.5.1
Use relative positioning to:
- Make an element the positioning reference for an absolutely positioned descendant. section 9.5.1
- Nudge text or decorative content with top, bottom, left, or right without replacing its normal layout position. section 7.1.3
- Prepare a card container for layered front and back faces in a flip interaction. section 9.2
Credit-card container
A card container can establish the reference point for its two faces: .card-item { max-width: 430px; height: 270px; margin: auto; position: relative; }. A .back element can then use position: absolute; top: 0; left: 0 to cover the same area. section 9.2 section 9.5.1
Drop-cap adjustment
A large first letter can be set to position: relative and shifted with top, bottom, left, or right. This offers an alternative to changing line-height when fitting the letter into surrounding text. section 7.1.3
Listing 9.3 Container styling
.card-item {
max-width: 430px;
height: 270px;
margin: auto;
position: relative;
}
Inspect the compact card-container rule that establishes relative positioning alongside size and centering. section 9.2
