CSS Position is one of the core concepts of CSS. however, the concept is pretty confusing for some beginners, including me.
The CSS Position property has 5 different values:
staticrelativeabsolutefixedsticky
Position Values
static is a default value on the HTML elements. You cannot use: the top, bottom, left, and right properties on the static element.
relative is almost similar to static. The difference is The relative value supports the top, bottom, left, and right properties.
absolute is positioned relative to the parent element.
fixed is positioned relative to the viewport. which means that the element is unaffected by the scrolling. fixed value usually use for the ad box.
sticky element looks similar to fixed but is different.
So we could say a sticky element is a toggle between relative and fixed, depending on the scroll position. Before the user scrolls the page, the position of the element is relative and the element will transform to fixed after a user scrolls the page.
I think that is pretty much it.
Preference I used :
Top comments (0)