CSS Positions Simplified

CSS Positions Simplified

learn how to position elements in CSS

Ansub Khan
·Nov 3, 2021·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

CSS positions property can help you set the position of the element in the HTML. it is a very useful property and often quite confusing for beginners so I tried to make things easy today!

let's look at the different types of position properties in CSS.

  1. static
  2. relative
  3. absolute
  4. fixed

Static

  • it is the default for every element
  • it means that the element will flow into the page as it normally would.
  • use it to remove the forcefully applied position to the element.

static.png

relative

  • it helps us to change the location of the element relative to itself.
  • for example:
<div class = "relative"> </div>

//CSS 

.relative{
        position: relative;
        top: 10px;
        left: 10px;
}

relative.png

absolute

  • this lets you place the element exactly where you want to put it.
  • this changes the element according to its parent's element, and when there is no parent element, then it is going to change position according to the HTML element.
<div class = "absolute"> </div>

//CSS 

.relative{
        position: absolute;
        top: 10px;
        left: 10px;
}

absolute.png

fixed

  • position is going to fix even if you are going to scroll the webpage
  • it is useful for fixed headers and footers
<div class="myDiv"></div>

.fixed{
    position: fixed;
}

fixed.png


if you want any help with the positions of CSS or any other query then please contact me on my Twitter

Did you find this article valuable?

Support Ansub Khan by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this