CSS Position

The position property specifies the type of positioning method used for an element.

There are 5 different position values that is:

static
relative
fixed
absolute
sticky

It always used to 4 coordinates properties that is :

left
right
top
bottom

1) CSS Position: static

The static position always positioned according to the normal flow of the page: It is also knon as default position value.

Example

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

Test it Now

2) CSS Position: relative

If the position is set to relative, an element can move according to its current position.

Example

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

Test it Now

3) CSS Position: fixed

You can set left/right & top/bottom coordinates. If the position is set to fixed.

Example 1

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

Test it Now

Fixed Top Menu Example

Test it Now

4) CSS position: absolute

The absolute position: is used to relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

Example

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

Test it Now

5) CSS Position: sticky

The sticky position is used to scroll position.

Example

 div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

Test it Now

Next Topic CSS Overflow (Layout)

← prev next →

CSS Tutorials

CSS Properties

CSS Position

There are 5 different position values that is:

It always used to 4 coordinates properties that is :

1) CSS Position: static

2) CSS Position: relative

3) CSS Position: fixed

Fixed Top Menu Example

4) CSS position: absolute

5) CSS Position: sticky