Good evening....today I learnt about various **positions **in CSS and I will list them out here:
1.STATIC:This is the default position in HTML. All elements are positioned according to this position unless mentioned otherwise.
2.FIXED: This makes the element stay fixed at a point relative to the viewport. We can mention values top,bottom,left,right and adjust the position accordingly. The element will stay fixed even during scrolling and has a default z-index of -1. Note that if we mention position as fixed, the element will be taken out of the normal flow of the page and will be placed on a separate layer. This can be changed by adjusting the z-index value.
3.RELATIVE:In this type of positioning, the element is moved relative to what would have been it's original position. In other words if an element is placed at a particular position initially while creation, once the position is changed as relative, it will move relative to it's earlier position and not relative to the viewport or webpage. Also other elements will not shift according to this element's position and hence overlapping may occur. This position also accepts top,bottom,left,right values. The element stays in the normal flow of the page.
4.ABSOLUTE: In this positioning, if the selected element has any ancestor whose position is relative then this element will move relative to the position of it's ancestor or else it will move relative to the top left corner of the webpage (not browser). This also accepts all four values and position's the element accordingly. Other elements adjust their positions according to this element's position.
5.STICKY:This is a hybrid between relative and fixed position. It makes an element with this position to act like it's **relatively positioned **until it's scrolled to a certain threshold after which it becomes fixed. This is mostly used for making navigation bar stick to the top of the page.
That's all about positioning....this generally requires a lot of practice to understand it completely so I recommend you to practice these positions very well until you get a hang of it.
That's all for today...see you all in the next post.
References: https://developer.mozilla.org/en-US/ https://www.w3schools.com/
Top comments (6)
well i kinda love that for us then, your notes remind me how long it took me to really wrap my head around absolute vs relative. you think there’s one position that always confuses more than the rest, or does it all just start clicking after enough practice
I feel very confused with absolute positioning....I am not able to visualize in my head how exactly the element will shift after giving the values
pretty cool seeing you stick with it day after day - you think constant practice is what really helps all this click or is there something else that does it for you
Nah its' pretty much practice and also how much effort you are willing to put into understanding each concept clearly....for me personally positioning is very confusing and I am still not clear with the concept even after practice. Maybe explaining it to someone else might make it clearer...
Nice
Such a valuable read—keep them coming!