The CSS position property chooses how an element is placed instead of simply letting it follow the browser’s default page flow. Pair it with top, right, bottom, or left offsets; use z-index when overlapping elements need layering. section 8.7 section 8.12
Choose the positioning scheme that matches the job:
- static keeps the browser’s default positioning and ignores offset properties. section 8.7
- relative moves an element from its usual spot while preserving its space in the page flow. section 8.7
- absolute removes an element from page flow and positions it against the nearest nonstatic ancestor, or the viewport when none exists. section 8.9
- fixed removes an element from page flow and positions it against the browser viewport. section 8.7
- sticky behaves relatively until scrolling crosses an offset threshold, then remains stuck until its containing block reaches it. section 8.11
element {
position: static|relative|absolute|fixed|sticky;
top: measurement|percentage|auto;
right: measurement|percentage|auto;
bottom: measurement|percentage|auto;
left: measurement|percentage|auto;
z-index: integer|auto;
}
Use this compact rule shape as a reminder of the position values, offset properties, and z-index syntax. section 8.7
A navigation row that sticks
A navigation row can scroll normally until its top reaches 5 pixels from the viewport’s top edge, then stay visible: .nav-links { position: sticky; top: 5px; }. Unlike a permanent fixture, it becomes unstuck when its parent boundary reaches it. section 8.11
A tooltip with absolute positioning
Make a containing element relative, then place a nested tooltip absolutely. With top: 0 and left: 0, the tooltip sits at the containing element’s top-left corner rather than taking up normal page space. section 8.9
