CSS positions are the most difficult things to learn in CSS (in my opinion).I am going to teach your position today.There are total five CSS positions:
- Relative
- Absolute
- fixed
- Sticky
Fixed:
This CSS position you can apply every element.
This elements left its own flow.You can see this element on the page but this is while scrolling.The element wil scroll.
Absolute:
This CSS position fixed like left its own flow but it will be fixed in scrolling.This CSS position is you can apply the positive properties.top right bottom left.
Relative:
This CSS position you are apply every element.This element will not left its own flow.This element is you can apply the positive position. top right bottom left. e.g Trying applying the position on footer and also applys top:50 .you will see that your footer will be a little than its own flow nad is that is own place.
Sticky:
This CSS position is not supported by all the browsers yet.If you apply this position to any element.When the elements reaches the top of the window.It will stick as the name suggests"Sticky".
Difference between CSS positions.
Absolute
- left its own flow
- can apply the position properties
- relative to the viewport
Relative
- Dont,t left its own flow-
- can apply the positions properties-
- relative to its own flow
Fixed
-fixed on its defined space-
-left its own flow-
This css positions are much complex than this,there are more things remaining to learn like stacking order and z-index.I will definelly write on article about this very soon.I am kind a active twitter.
Top comments (0)