Learn positions in css
Learning positions in css is very important skills for frontend developer. positions is very usefull properties which we use day to day life in order to make good ui
What is positions in css
In CSS, the position property determines how an element is positioned within its parent container or viewport.
Static
This is the default value. Elements with position: static
are positioned according to the normal flow of the document. Static position helps us to reset any other position and bring back default.
and top, right, bottom, left, and z-index properties have no effect on static element.
I have add some default css to red box
top-40px ,bottom-40px, left-40px, right-40px
if you change to any other
position other that static then only top will have effect
Relative
Elements with position: relative
are positioned relative to their normal position.
You can then use the top, right, bottom, and left properties to offset the element from its normal position
position: static
Absolute
An absolute positioned element is positioned relative to the first parent element that has a position other than static You can also use the top, right, bottom, and left properties to position the element precisely.
Change the position on child div. by default child div is static and box is absolute so if change the position of child div other than static then box will change its position according to child div
position: static
Add some top,bottom etc to move
sticky
Elements with position: sticky
are positioned based on the user's scroll
position. They behave like relative positioning until the element reaches a specified
point, then they "stick" in place.
Change the position to sticky. and scroll it will become sticky at 20px from top
See this div will never go out of window. it will become sticky at 20px from top
Fixed
Fixed Elements with position: fixed
are positioned
relative to the viewport, which means they always stay in the same place even if
the page is scrolled
Change the position of box to fixed and see how the content is scrolling
position: static
Add some top,bottom etc to move
Hope you learned the position in css in better way. see you in next post any typo or mistake please DM.