CSS Position Property

Control element placement with position: static, relative, absolute, fixed, and sticky.

Overview

The `position` property controls how an element is placed in the document. Combined with the `top`, `right`, `bottom`, and `left` offset properties, you can place elements precisely anywhere. The five position values: - **static** (default) normal document flow, offset properties have no effect - **relative** normal flow, but offsets move the element from its normal position without affecting surrounding elements - **absolute** removed from normal flow, positioned relative to its nearest positioned ancestor (or the viewport if none) - **fixed** removed from normal flow, positioned relative to the viewport stays in place when scrolling - **sticky** hybrid: acts like relative until it reaches a scroll threshold, then sticks like fixed "Positioned" means anything other than static. To use absolute positioning correctly, the parent must be set to `position: relative`.

Key Points

•static: default, top/left/right/bottom have no effect
•relative: offset from normal position, surrounding elements unaffected
•absolute: positioned relative to nearest non-static ancestor
•fixed: stays in viewport when page scrolls (use for navbars, banners)
•sticky: relative until scroll threshold, then fixed (use for sticky headers)
•z-index only works on positioned elements (not static)

Examples

Relative positioning

.nudge {
  position: relative;
  top: 10px;    /* moves 10px down from its normal position */
  left: 20px;   /* moves 20px right */
}
/* The space where the element normally sat is PRESERVED */

Absolute positioning badge over a card

.card {
  position: relative;   /* establishes the positioning context */
}

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
  /* Now positioned 8px from top-right corner of .card */
}

Without position: relative on the parent, .badge would position itself relative to the viewport.

Fixed and sticky

/* Fixed header stays at top when scrolling */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

/* Sticky section header sticks at top of viewport as you scroll */
.section-header {
  position: sticky;
  top: 0;
  background: white;
}

Common Mistakes

Using position: absolute without setting position: relative on the parent
Forgetting that fixed and absolute elements are removed from flow other content may overlap them
Using top/left/right/bottom on a static element they have no effect

Note

The most common absolute positioning pattern: parent gets "position: relative", child gets "position: absolute" with top/right/bottom/left values. This is used for badges, tooltips, dropdowns, and overlays.

CSS Position Property

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

Which position value removes the element from normal document flow and positions it relative to the viewport?