From Beginner to Expert: Harnessing the Potential of CSS Positions.

Hi Folks, In this article we are going to learn about Positioning of elements in CSS. As name suggests, providing position an element at particular place in our webpage. we can change position by using top, bottom, left, right offsets.

5 types of positions in CSS

Static
Relative
Absolute
Fixed
Sticky

We are going to apply all property in the below code.

<section>
        <div id="static">Static</div>
        <div id="relative">Relative</div>
        <div id="absolute">Absolute</div>
        <div id="fixed">Fixed</div>
        <div id="sticky">Sticky</div>
    </section>

* {
  font-weight: bold;
}

div {
  border: 2px solid black;
  width: 400px;
  height: 100px;
  margin: 5px 0;
}

1.Static

In static position, an element hold on to it's original position and doesn't affected by top, bottom, left, right offsets. Static is the default property of element, element positioned according to the normal flow of the document.

e.g.

#static{
            position: static;
            top: 10px;
            left: 10px;
        }

As we can see, position of static didn't even change after giving offsets top: 10px; and left: 10px; all changes gets ignored.

2.Relative

In Relative position, an element changes it's position with respect to it's original position, when we give offsets left, right , top , bottom then they applies respect to it's original position.

e.g.

#relative {
  background-color: rgb(200, 55, 195);
  position: relative;
  top: 20px;
  left: 20px;
}

As we can see relative take offsets according to it's initial or original position.

3. Absolute

It's a little bit tricky, In absolute position, an element removes out from the normal flow of document. Let's see the example.

#absolute {
  background-color: rgb(103, 195, 45);
  position: absolute;
}

As we can see above, as we did position: absolute; it's been removed out from the document flow and the element next to it occupied absolute's box position (i.e. yellow box behind absolute)

In simple words, absolute box appearing where it was originally placed but actually it is out of the document flow that's why next element yellow box took its position and absolute box trying to placing itself to it's original position.

Now we will apply offsets to absolute.

#absolute {
  background-color: rgb(103, 195, 45);
  position: absolute;
  top:35px;
  left: 35px;
}

An absolute position takes offsets(top, bottom, left, right) with respect to it's recently positioned parent.

In simple words, when we applies offsets in position: absolute; then it checks it's parent , does it have any position :-

If yes, then absolute positioned element changes it's position with respect to it's parent. If not, means parent does not have any position then absolute box will check parent of parent , does it have any position? and it will check up to <body> element until absolute box finds a recently positioned parent , if none of the it's parent have any position then position: absolute; element changes it's position with respect to <body> element.

4. Fixed

In position fixed, Element removes out of the document flow just like absolute. e.g.

#fixed {
  background-color: rgb(245, 232, 47);
  position: fixed;
}

As we can see above, as we did position : fixed; , then the target element removes out from the document flow and the next element sticky occupied fixed's element place and fixed comes above sticky just like we saw above in absolute.

Now we'll apply offsets in Fixed.

#fixed {
  background-color: rgb(245, 232, 47);
  position: fixed;
  top:35px;
  left:35px;
}

https://codepen.io/Bharat-Singh-the-selector/pen/MWRbqVP

Click on the white codepen screen and then scroll down the codepen page to understand the Property in a practicle way.

As we can see above, by scrolling down the page, the fixed element sticked to the given position permanently. Fixed position takes offsets (left, right, top, bottom) with respect to body.

5.Sticky

It is one of the most important property, which uses in websites frequently e.g. making of an header. It is the combination of relative and fixed property. It fixes an element at a particular place until it's parent element doesn't end.

Let's see from example:-

<div id="Parent">
      <div id="sticky">
        As I am an sticky element So, I will not move 
        untill my parent doesn't end
      </div>
  </div>

#Parent{
  height: 700px;
  width:100%;
  background-color: lightgrey;
}

#sticky{
  background-color: pink;
  position:sticky;
  top:55px;
  left:55px;
}

https://codepen.io/Bharat-Singh-the-selector/pen/XWQdXrW

Click on the white codepen screen and then scroll down the codepen page to understand the Property in a practicle way.

As we can see above, as we did Position:sticky; then it acted as a relative position means no effect on the flow of document, after applying offsets it become fixed at the given position until it's parent element doesn't ended. It takes offsets with respect to body.

As we are scrolling the page down, we can see our element is sticked to that place but after it's parent element ended it becomes disappear(scrolled up with page).

Important Notes:-

Q. Difference between Sticky and Fixed Position?

Ans:- Sticky position does not removes element out of the document flow while fixed position does.

Both takes offsets with respect to body but fixed position permanently fixed the element on the page while sticky fixes the element until it's parent element doesn't end.

Note:-

As I believe, to be a good developer we should more focus on practicality, not on theory. so go and get your hands dirty on it, try all the code by yourself.

Thank you so much for reading it completely, If you liked it do like, comment, share and follow for more content. Comment for any feedback.

Positions in CSS