The position property in CSS is used to specify the method of positioning an element in the document. It determines how an element is placed in the layout. The most commonly used values are:
Elements are positioned in the normal document flow. Top, left, bottom, and right have no effect.
The element is positioned relative to its normal position. You can move it using top, left, right, or bottom.
top: 20px; left: 20px;
The element is removed from the normal flow and positioned relative to the nearest positioned ancestor (not static).
Fixed elements stay in place relative to the browser window, even when scrolling.
(Scroll this page to see the fixed element stay in place.)
Sticky elements toggle between relative and fixed, sticking when a defined offset is met during scroll.
Scroll this section to see the sticky effect in action. Sticky positioning only works inside scrollable containers.
| Position Type | Behavior |
|---|---|
| static | Normal flow, no top/left effects |
| relative | Relative to its original position |
| absolute | Relative to nearest positioned ancestor |
| fixed | Stays in place relative to viewport |
| sticky | Sticks when scrolled to a threshold |
absolute positioning to work as expected, make sure the parent has position: relative.
Help others discover Technorank Learning by sharing your honest experience.
Your support inspires us to keep building!