Position: static, relative, absolute, fixed, sticky

/* static — default, top/left/etc. have no effect */
.default { position: static; }

/* relative — offset from its normal position, still in flow */
.badge {
  position: relative;
  top: -4px; /* shift up 4px without affecting other elements */
}

/* absolute — removed from flow, positioned relative to nearest
   non-static ancestor */
.tooltip {
  position: absolute;
  top: 100%;
  left: 0;
}

/* Parent must be positioned for absolute child to anchor to it */
.tooltip-wrapper {
  position: relative;
}

/* fixed — relative to the viewport, stays on scroll */
.sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

/* sticky — normal flow until threshold, then fixed within parent */
.section-header {
  position: sticky;
  top: 0;
  background: #fff;
}