This content originally appeared on DEV Community and was authored by Ranjani R
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/
This content originally appeared on DEV Community and was authored by Ranjani R
Ranjani R | Sciencx (2025-06-27T13:49:55+00:00) DAY 15-CSS POSITIONS. Retrieved from https://www.scien.cx/2025/06/27/day-15-css-positions/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.