Position in CSS


Position property in CSS is used to specify the type of positioning method used for an element.

Type of positioning means how the element is positioned in the document flow. Suppose we have a div element and we want to position it at the bottom right corner of the page or we want to show it on the top of the page. We can do this by using position property.


Types of Positioning

There are five different types of positioning methods for elements:

  1. static - Default value. Elements render in order, as they appear in the document flow.
  2. relative - Relative positioning moves an element in relation to its normal position.
  3. absolute - Absolute positioning positions the element relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
  4. fixed - Fixed positioning is a type of absolute positioning that positions the element relative to the viewport, which means it always stays in the same place even if the page is scrolled.
  5. sticky - Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.
CSS position example
Left element
Target Element
Right element

Other content

Other content

Other content

Other content

Other content

Other content


1. Position static

Static positioning is the default value of the position property. Static positioning means that the element is not positioned in any special way; it is always positioned according to the normal flow of the page.

Static positioning is not a real positioning method. It is just the default value of the position property. Static positioning is used to remove the effect of any previous positioning method.

The element positioned static is not affected by top, bottom, left, and right properties.

Example

.static {
  position: static;
  border: 3px solid #73AD21;
}
Try it

2. Position relative

Position relative value sets the element relative to its normal value.

The position relative is followed by offsets either top, bottom, left, or right. These offsets are used to move the element from its normal position.

Example

.relative {
  position: relative;
  left: 30px;
  top: 30px;
  border: 3px solid #73AD21;
}
Try it

3. Position fixed

Position fixed value is used to set an element fixed to the page at any spot. Regardless of the page scroll, it doesn't move the element is fixed to its position.

The top, bottom, left or right property is used to set the element where it should be located.

Example

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  background-color: gold;
}
Try it

4. Position absolute

The position absolute value is used to set the positioning of the element according to the nearest positioned parent. In case none of its parents is positioned then the element will position itself according to the document body.

The top, bottom, left or right property is used to set the element where it should be located.

Note - The parent is called positioned only when it has any position value other than static.

Example

.parent{
    position: relative;
    top: 50px;
    left: 40px;
    background-color: gold;
}

.child{
    position: absolute;
    top: 10px;
    background-color: red;
}
Try it

5. Position sticky

Position sticky value is used to make an element fix or stick at any location. Beyond that location, the element is free to move or scroll.

Position sticky value toggle between relative and fixed. This property is generally used to stick any element or note at the top of a web page.

Note - This property needs at least one value among the top, bottom, left, and right.

Example

.sticky {
    position: sticky;
    top: 20px;
    background-color: gold;
}
Try it

Learn the difference between relative and absolute positioning in CSS.