CSS Position - Absolute, Relative, Fixed, and Sticky Explained

In CSS, the position property specifies the type of positioning method used for an element in the document. It determines how an element is placed on the page relative to its normal flow, ancestors, or the viewport.

Syntax:

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

Value	Description	Stays in Document Flow	Positioned Relative To	Common Use Case
static	Default position, no custom positioning.	Yes	N/A	Basic page layout
relative	Moves relative to its normal position.	Yes	Its original position	Slightly adjusting element's position
absolute	Removed from flow, positioned absolutely.	No	Nearest positioned ancestor	Dropdowns, modals, floating elements
fixed	Removed from flow, fixed relative to screen.	No	Viewport (browser window)	Fixed headers, footers, floating buttons
sticky	Switches between relative and fixed.	Yes	Scroll position	Sticky headers, scroll-aware elements

Static (default):

This is the default positioning method. Elements are placed in the normal flow of the document.The element is not affected by top, left, right, or bottom properties.

Example

.static {

position: static; /* Default behavior */

border: 3px solid green;

}

Try it yourself

Relative:

The element is positioned relative to its normal position in the document flow.The element remains in the document flow, and space for the element is preserved. You can offset it from its original position using top, left, right, or bottom.

Example

.relative {

position: relative;

border: 3px solid green;

top: 20px; /* Moves down 20px from original position */

left: 10px; /* Moves right 10px from original position */

}

Try it yourself

Absolute:

The element is positioned relative to its nearest positioned ancestor (an element with relative, absolute, or fixed positioning). If no positioned ancestor exists, it is positioned relative to the initial containing block (usually the document).The element is removed from the document flow, meaning other elements behave as if it’s not there.

Example

.absolute {

position: absolute;

border: 3px solid green;

width : 100px;

height : 100px;

top: 20px;

left: 10px;

}

Try it yourself

Fixed:

The element is positioned relative to the viewport, meaning it remains fixed in the same spot on the screen even when the page is scrolled.Like absolute, it is removed from the document flow, but it is always positioned relative to the viewport.

Example

.fixed {

position: fixed;

bottom: 0;

right: 0;

width: 300px;

border: 3px solid green;

}

Try it yourself

Sticky:

The element toggles between relative and fixed positioning depending on the user's scroll position. When the element reaches a certain point, it becomes "stuck" and behaves like a fixed element.The element behaves normally until it reaches the specified top, left, right, or bottom value, at which point it becomes fixed.

Example

.sticky {

position: sticky;

top : 0;

width: 300px;

border: 3px solid green;

}

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.