Positioning in CSS like a God!
Ever wonder how to make your website look astounding and what makes you different from the other developers out there?
Want to learn how to position your HTML elements in CSS flawlessly and efficiently and how to control the overlapping elements?
One of the best CSS tricks to manipulate your elements in a pure HTML is to use the POSITION property which specifies the type of positioning method followed in your stylesheet for various elements!
To put it in a easy way, there are 5 different ways you can site your elements -
- STATIC- The elements in our HTML page are set to static by default, and all static means is all the elements will appear in the same order as defined in our HTML with respect to our normal page. They don’t have any impact on top, left or any other properties of positioning.
2. RELATIVE- The relative positioning works exactly like static positioning but it allows you to do 4 things that static doesn’t that is position the element with respect to its top, left, right and bottom position. These properties of relative just “stir” the element from the original position in that direction. let us see how it works!
In addition, you must know that relative can actually overflow the other elements as it removed from the document flow, so we never usually use top , left and other properties with relative rather use it with absolute.
3. ABSOLUTE- Absolute completely removes the element from the document flow and every other element is positioned as if that element didn’t exist. This is extremely crucial if we want to stick an element and doesn’t want any other element to move around it.
Like relative it also uses top, left, right and bottom.
It absolutely positions itself inside of a parent container that is NOT STATIC.
So, this is how relative and absolute play really nice with each other and can come in handy!
4. FIXED- Fixed position completely ignores the relatively positioned parent and positions itself with respect to the original document. They are not affected by parents and also a unique property of Fixed elements are they stay at the same place and are not affected by scrolling!
5. STICKY- To put it in an uncomplicated way, sticky combines the relative and fixed positioning properties together!
The element is treated like a relative value until the scroll location of the viewport reaches a specified threshold, at which point the element takes a fixed position where it is told to stick.
As soon as our element hits the top of our page it becomes fixed there!
So, this was all you need to know on how to position elements of your website using CSS like a God! Remember, getting good at CSS takes constant practice and hands-on-coding, so start playing around with the fiddles on real projects and get to understand more on how these properties work!