The webpage is being built with a lot of elements and each element have its own position, it's very important to learn about the position and its uses, with the help of position we can position our elements according to our need
In this article, we will learn about what are the different position properties of CSS and how to arrange the elements with the help of the position. This property is a single keyword, and we attach a value to it to set the specific position of an element.
There are 5 types of position properties they are:
static
fixed
sticky
absolute
relative
before getting into the properties let's learn what happens when we don't use any position to the elements.?? if we don't use any properties then we will get to see its default position, we can see all the elements are arranged in a vertical position from left to right
Look at the above Example here I haven't given any position property to any element and the images are coming one by one in the vertical position because that's the default position, some margin is being also assigned from the top as well as from the left side which is done by HTML element and its the default spacing. We can also provide some default spacing in the CSS we can give [margin-top: 20px;] so spacing will be applied to every image and we can see the spacing between them.
Static
The static position is the default value provided by the HTML Element, if you want to do any changes to the elements or apply some style to the respective elements then static is of no use. if we are not using any position then by-default static is being used by the HTML Element. if we use some properties such as top and bottom, it will not get applied to the elements
Fixed:
Fixed is something which will keep that element position fixed if you scroll down the page, we can use the properties like top, right, bottom and left, This is mostly used in navigation bars.
Note: in position fixed also the element is removed from the normal document flow.
Note: I have Given position fixed to the header and the banner area that's why they are not moving from their place for more details please look at my codepen files
I have given max-width:600 according to the size of codepen you can increase and decreaseas size according to your convenience
Sticky:
position: sticky can be explained as a mixture of position: relative and position: fixed. At declaration, it acts like position: relative, but when scrolling, it acts like position:fixed. let me explain why i have written here that when it scrolls it behaves like a position: fixed. Because we can make it fixed so that it will not move from a particular position. we can apply helper properties here like (Top, Bottom etc). have a look at my code pen files it is visible that my navbar is getting stuck to a particular point after getting to its respective position
NOTE: applied position sticky to the navbar
Absolute:
In the absolute position, the element is removed from the normal flow of the document. Here we can use its helper properties like (Top, Bottom,Left, and Right), it will get its position concerning its nearest position ancestor, we can also place the element in any position in the webpage according to our need. If it doesn't have any positioned ancestor element then it will behave according to the document body(browser window).
Note: I have given an absolute position to the box-3
Relative:
Relative position means relative to itself. if we just apply position relative to any element then it does not affect the element position until and unless we apply some helper properties on it like(top, bottom, left and right) otherwise it just behaves as Static does.
so it just does the same thing as it used to do with position static. if we apply top then it will move from its original position which is different from positon-absolute.
Note: Applied position-relative to box-4/image, though I have applied top and left that's why we can see the element is moving from its original position, if we don't apply top and left then it will not move from its original position.
Hello, Friends do let me know through comments where I am lacking so that I can improve it next time thank you for reading my article.