The position property controls how an element is placed in the document layout. Relative positioning establishes an ancestor for an absolutely positioned element, while absolute positioning removes that element from normal flow. section 9.5.1
Use these behaviors when layering or nudging interface elements:
- Set a card container to position: relative so positioned descendants use it as their reference. section 9.5.1
- Set a card face to position: absolute; top: 0 and left: 0 place it at the container’s top-left corner and remove it from normal flow. section 9.5.1
- Use relative positioning with top, bottom, left, or right to adjust an element’s position relative to surrounding content. section 7.1.3
Stacking the faces of a virtual credit card
Give the card container relative positioning, then place its back face absolutely at top: 0 and left: 0. The back face can occupy the same area as the front and rotate during the flip effect. Apply this arrangement only where hover is supported; on devices without hover, show both faces together. section 9.0 section 9.5.1
