Position of a element in a page layout is very important and it make our webpage more beautiful . There are many ways to set an element in the page layout and CSS Position property is one of them .
So today we'll discuss about position property and I'll make sure , I explain these concepts in a simple and easy way .
What are the CSS Positions ?
So Position is a property of CSS which allow us to adjust a element as per our requirement into the html layout .
Position property contains five type properties :
- Static
- Fixed
- Relative
- Absolute
- Sticky
Note -> After set the position property of element , we gave top , left , right , bottom , z-index , often called offset Properties to adjust the element on desired position .
Let's discuss about the position property with example .
Static
It's the default property of position for every element of html and offset property doesn't with it . It shows the element according to document flow .
HTML
CSS
Result
Fixed
This value of position property used to fixed the position of a element and after that it cannot move even scrolling of page . However we set the position of element which we want to fixed by using offset properties .
CSS
Result
Relative
This value is used when we want to move the element from its existing/normal position by set the offset properties .It's not affect other elements in layout .
CSS
Result
Absolute
It work according to the position of its parent element , after taking the offset properties values . By default its parent element is body .
CSS
Result
Sticky
It behaves as relative and fixed values. When a user scrolls on a page, elements tends to be relatively positioned and when scrolled to a particular threshold of the offset properties set, elements get fixed at a spot. This value is not commonly used for it is not supported by some browsers.
z-index is applied when you want to stack elements over one another. This property takes either positive or negative interger without any form of measurement e.g > z-index: 1;
Note -> Just knows about the position is not enough you've to practice it as much as you can and over the time you feel confident to use it .
This was an attempt from my side to make you understand this topic and I hope that I would be able to explain it to you.
Thanks for reading!.