The position property determines how an element is positioned in the document, with values like static, relative, absolute, fixed, and sticky each establishing a fundamentally different positioning behavior.

Syntax

position: static | relative | absolute | fixed | sticky;

Deep Dive Course

static, the default, follows normal document flow with no positioning offset applied at all; relative positions an element normally in flow but then allows shifting it visually via top/right/bottom/left, still leaving its original space reserved in the layout; absolute removes the element from normal flow entirely, positioning it relative to its nearest positioned ancestor, any ancestor with a position other than static, or the initial containing block if none exists; fixed positions relative to the browser viewport itself, staying in place even as the page scrolls; and sticky behaves like relative until a scroll threshold is crossed, then switches to behaving like fixed within its containing block's bounds.

1Understanding Position

💡

An absolutely positioned element positions itself relative to its nearest ancestor with a position other than static — if no ancestor has been given an explicit position, it falls back to positioning relative to the entire page, which is why adding position: relative to an intended parent container is a critical, easy-to-forget step.

editor.html

.container {
  position: relative;
}

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

localhost:3000

2Practical Example

Here is a real-world application of Position showing how it is used in production CSS code.

editor.html

.navbar {
  position: sticky;
  top: 0;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Position:

1. Set position: relative on an intended parent container specifically to establish it as the positioning context for a child using position: absolute

2. Use position: sticky for elements like a header that should scroll normally at first, then stick in place once reaching a certain scroll point, within its container's bounds

3. Use position: fixed sparingly, and be mindful it removes the element from normal flow entirely, meaning it takes up no space among its siblings and needs its own explicit positioning

⚠️

Tip: An absolutely positioned element positions itself relative to its nearest ancestor with a position other than static — if no ancestor has been given an explicit position, it falls back to positioning relative to the entire page, which is why adding position: relative to an intended parent container is a critical, easy-to-forget step.

editor.html

.container {
  position: relative;
}

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

localhost:3000

Examples

Example 01Basic Usage

.container {
  position: relative;
}

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

Example 02Advanced Example

.navbar {
  position: sticky;
  top: 0;
}

Best Practices

Set position: relative on an intended parent container specifically to establish it as the positioning context for a child using position: absolute
Use position: sticky for elements like a header that should scroll normally at first, then stick in place once reaching a certain scroll point, within its container's bounds
Use position: fixed sparingly, and be mindful it removes the element from normal flow entirely, meaning it takes up no space among its siblings and needs its own explicit positioning

Interview Question

Why does an absolutely positioned element sometimes unexpectedly position itself relative to the entire page, rather than relative to its intended, visually nearby parent container?▼

Hint: Think about the specific rule for how position: absolute determines which ancestor it's actually positioned relative to.

An absolutely positioned element positions itself relative to its nearest ancestor that has a position value other than the default static, regardless of how visually close or how deeply nested that ancestor actually is in the markup — if none of its ancestors have been explicitly given a non-static position, whether relative, absolute, fixed, or sticky, there simply is no positioned ancestor for it to anchor to, and it falls all the way back to positioning itself relative to the page's initial containing block, effectively the entire viewport. This means a developer might visually intend an absolutely positioned badge to sit relative to its immediate, visually-nearby parent container, but if that specific parent was never given an explicit position: relative, or any non-static position, the badge instead searches further up the ancestor chain, potentially finding no positioned ancestor at all and positioning itself relative to the whole page instead, producing a confusing result that seems to ignore the intended nearby container entirely. This is exactly why explicitly setting position: relative on the intended parent, even without adding any actual offset values to it, is such a commonly needed, easy-to-forget step when using absolute positioning.

Exercises

MediumPractice using Position in a real scenario.

View Solution

.container {
  position: relative;
}

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

Frequently Asked Questions

Why does an absolutely positioned element sometimes unexpectedly position itself relative to the entire page, rather than relative to its intended, visually nearby parent container?▼

Related Functions

Top, Right, Bottom, LeftZ-indexFloat