Common Positioning Layout Patterns

Pattern 1: A Badge on a Card

.card { position: relative; }
.card .badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

A relatively positioned wrapper combined with an absolutely positioned child is the standard way to pin a small element - a badge, a close button, a count indicator - to a corner of a container.

Pattern 2: A Full-Cover Overlay

.image-wrap { position: relative; }
.image-wrap .overlay {
  position: absolute;
  inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0; */
  background: rgb(0 0 0 / 0.5);
}

The inset: 0 shorthand stretches the overlay to exactly match its positioned parent's size, a common technique for image hover effects and loading states.

Pattern 3: A Sticky Table Header

thead th {
  position: sticky;
  top: 0;
  background: white; /* prevents content showing through while stuck */
}

Pattern 4: Centering with Absolute Positioning

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Percentage offsets in top/left are relative to the container's size, while the translate percentage is relative to the element's own size - combining both is what achieves true centering regardless of the modal's dimensions.

Pattern 5: Fixed Header with Content Offset

.site-header {
  position: fixed;
  top: 0;
  height: 60px;
}
body {
  padding-top: 60px; /* prevents content from hiding under the fixed header */
}