Positioning

Positioning changes participation in normal flow and which containing block supplies inset offsets.

| Value | In flow? | Typical use | |-------|----------|-------------| | static | yes | default | | relative | yes (offset visual only) | nudge, positioning context | | absolute | no | overlays inside positioned ancestor | | fixed | no (viewport unless captured) | persistent chrome | | sticky | hybrid | section headers in scroll container |

					.centered {
  position: absolute;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
}
.sticky-header {
  position: sticky;
  top: 0;
}
				

Sticky requires a scroll ancestor with room to stick; `overflow: hidden` on parents often breaks it.

On interviews: absolute centering, why sticky fails, overlay layering, and effect of positioned ancestors.

The trade-off is layout escape through positioning versus preserving document flow and accessibility order.

Common pitfalls: absolute for general page layout; sticky inside overflow-hidden ancestors.

Checklist:

• Preserve normal flow when possible.
• Identify containing blocks before absolute/fixed.
• Check scroll containers for sticky.
• Prefer logical inset for RTL layouts.