Layout & Positioning

position: relative;
top | right | bottom | left: value;

.badge-container {
  position: relative;
}

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

Note position: relative keeps the element in the normal flow but enables offset with top/right/bottom/left. Its main use is establishing a positioning context for absolutely positioned children.

position: absolute;
top | right | bottom | left: value;

.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: #1f2937;
  color: white;
  border-radius: 4px;
  white-space: nowrap;
}

Note Absolute positioning removes the element from the document flow and positions it relative to the nearest positioned ancestor (one with position: relative, absolute, fixed, or sticky). If none exists, it positions relative to the viewport.

position: fixed;
top | right | bottom | left: value;

.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: white;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
}

.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
}

Note Fixed elements are positioned relative to the viewport and stay in place during scrolling. They are removed from the document flow. A transform, filter, or perspective on any ancestor breaks fixed positioning and makes it relative to that ancestor instead.

position: sticky;
top: value;

.table-header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

.section-label {
  position: sticky;
  top: 64px; /* below a fixed navbar */
}

Note Sticky is a hybrid: it behaves as relative until the scroll position reaches the threshold (top/bottom), then it sticks like fixed. The element must have a scrollable ancestor and the parent must have enough height for it to work. overflow: hidden on an ancestor can prevent sticking.

z-index: integer;

.dropdown   { z-index: 10; }
.modal-bg   { z-index: 40; }
.modal      { z-index: 50; }
.toast      { z-index: 60; }

/* Isolate stacking context */
.component {
  isolation: isolate;
}

Note z-index only works on positioned elements (relative, absolute, fixed, sticky) and flex/grid children. Elements with opacity < 1, transform, or filter create new stacking contexts. Use isolation: isolate to explicitly create one without side effects.

float: left | right | none;
clear: left | right | both;

/* Classic text wrapping around an image */
.article-image {
  float: left;
  margin: 0 16px 16px 0;
  max-width: 40%;
}

/* Clear floats */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Note Floats were once used for page layouts but flexbox and grid have replaced that use case. Floats are still useful for wrapping text around images. Use the clearfix hack or display: flow-root on the parent to contain floated children.

/* Horizontal block centering */
margin: 0 auto;
/* Flex centering */
display: flex; justify-content: center; align-items: center;
/* Grid centering */
display: grid; place-items: center;
/* Absolute centering */
position: absolute; inset: 0; margin: auto;

/* Method 1: margin auto (horizontal only) */
.container { margin: 0 auto; max-width: 800px; }

/* Method 2: flexbox (both axes) */
.flex-center { display: flex; justify-content: center; align-items: center; }

/* Method 3: grid (both axes, shortest) */
.grid-center { display: grid; place-items: center; }

/* Method 4: absolute (both axes, within parent) */
.abs-center { position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content; }

Note For most cases, the grid place-items: center approach is the shortest and most versatile. Use margin auto for simple block-level horizontal centering. The absolute method works when you need to center within a positioned parent.

inset: top right bottom left;
inset: all;

/* Fill entire parent */
.overlay {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.5);
}

/* 20px from each edge */
.inset-box {
  position: absolute;
  inset: 20px;
}

Note inset is shorthand for top, right, bottom, and left. inset: 0 is equivalent to top: 0; right: 0; bottom: 0; left: 0. It follows the same clockwise shorthand pattern as margin and padding.