Position property in CSS

The position property in CSS specifies the type of positioning method used for an element. Knowing CSS positions will helps you to design beautiful interfaces easily. In this article we are going to learn about various position types and their implementation.

The CSS position property help us to change and move items we want.

There are 5 CSS position property

1. Static

2. Relative

3. Absolute

4. Fixed

5. Sticky

Let's see some examples to understand these properties.

Position Property Values 1 . Static Positioning:-

Static positioning is the default value for the position property. That is the elements on the page appear in the order expected by normal flow. The placement properties top, left, bottom and right do not affect an element that has position: static.

It can often be useful to set the position property to static even though it is the default value. An example of when you might want to do this is when you want to override a position value you have set elsewhere.

Let’s look at an example to see that position static has no effect on the element with this property.

div .static {
  position: static;
  top: 10px;
  left: 10px;
  border: 1px solid black;
  background-color: red;
}

2 . Relative Positioning :-

Relative position means that an element is positioned relative to its original position in the normal flow. By setting an element to just have position: relative nothing will happen. We will need to use the placement properties to change how the element is positioned relative to its original position.

Basically when you set a HTML element to position: relative, it will remain in the flow of the layout. But, by using the placement properties you can move the element around. Let’s look at an example to cement your understanding of the relative position.

We are going to replace the position: static with position: relative.

div .relative {
  position: relative;
  top: 10px;
  left: 10px;
  border: 1px solid red;
  background-color: purple;
}

3 . Absolute Positioning:-

An element with position: absolute; is positioned relative to the nearest positioned ancestor

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Note : Absolute positioned elements are removed from the normal flow, and can overlap elements.

div .absolute {
  position: absolute;
  top: 30px;
  left: 150px;
  border: 1px solid red;
  background-color: orange;
}

4 . Fixed positioning :-

Fixed positioning works like absolute positioning in that it is removed from the normal document flow, and the space that element was originally occupying is no longer reserved for that element.

Fixed positioned elements are positioned relative to the viewport. What this means is that when you scroll down the page, the element remains in its original location on the page. This is often used for navigation bars, which no matter where the users scrolls on the page always remain visible at the top of the page.

We are going to change the position of box-2 from position: absolute to position: fixed. We are also going to change the value of the top property to 0 and remove the left properties value. We have also added some more boxes to show you the effect as you scroll.

div .fixed {
  position: fixed;
  top: 0px;
  border: 1px solid red;
  background-color: black;
}