CSS Position

CSS position property specifies how and where an element should be positioned in the layout.

There are several positioning methods available in CSS which can help us position an element at any desired position in the layout.

In this CSS tutorial, we will discuss each of these positioning methods in detail.

To control the position of an element, the position property can accept any of the following five values:

• static
• relative
• fixed
• absolute
• sticky

Each of the above five values defines a separate positioning method. The position property takes help of the top, right, bottom, and left properties for positioning the elements in the layout.

Let’s discuss each positioning method in detail:

CSS Static Position

Every HTML element has position value static by default.

An element having position:static; is always positioned according to the normal flow of the layout. Therefore, properties top, right, bottom, and left do not affect statically positioned elements at all. Try out the example given below to see how it works:

Example:

div{
  position: static;
  background: #05ffb0;
  left: 50px;
  top: 100px;
}

CSS Relative Position

An element having position:relative; is always positioned relative to its normal(default) position in the layout. Therefore, specifying properties top, right, bottom, and left for a relatively positioned element always moves the element away from its normal(default) position. Refer to the example below:

Example:

div{
  position: relative;
  left: 50px;
  top: 100px;
  background: #05ffb0;
}

CSS Fixed Position

An element having position:fixed; is always positioned relative to the viewport. It always stays in the same position even if the page is scrolled.

The properties top, right, bottom and left are used to position the element at any desired position. See the example below:

Example:

div{
  position: fixed;
  right: 0;
  bottom: 0;
  background: #05ffb0;
}

CSS Absolute Position

An element having position: absolute; is positioned relative to its nearest positioned parent(ancestor) element.

If the element has no positioned(element having position except static) ancestor, It will use the document body as its positioned ancestor and will be positioned relative to it. Try out the below example to check how it works:

Example:

.parent{
  position: relative;
  width: 400px;
  height: 250px;
  background: #310736;
}
.child{
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: #05ffb0;
}

CSS Sticky Position

An element having position:sticky; toggles between the relative and fixed positioning depending on the scroll position. Its position is considered as relative until you scroll the webpage to a certain point. Once this point is met, the element behaves like a fixed positioned element and it becomes sticky at that position even if you scroll the webpage.

The position: sticky; is generally used to make sticky headers in the website designing. Refer to the example below:

Example:

div{
  position: sticky;
  top: 0;
  background: #05ffb0;
  border:2px solid blue;
  padding: 5px;
}

All Positioning Properties