Positioning Context and Containing Blocks

Positioning Context

An absolutely positioned element is placed relative to its nearest positioned ancestor (non-static). Understanding this chain is key to predictable absolute positioning.

Example

.grandparent { position: static; }   /* NOT a context */
.parent      { position: relative; }  /* IS a context */
.child       { position: absolute; top: 0; left: 0; }
/* .child positions relative to .parent, not .grandparent */

/* Check: if no positioned ancestor, absolute positions to viewport */
.no-context {
  position: absolute;
  top: 0; left: 0; /* goes to viewport top-left */
}

CSS

Full Editor

Pro Tip

When absolute positioning behaves unexpectedly, inspect ancestor elements in DevTools to find which one is the positioning context.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned