#1 CSS Position

CSS Tutorial :)
• CSS Introduction Lesso...
HTML Tutorial :)
• Html Introduction - Pa...
1.static (default):
This is the default position value for all HTML elements.
Elements with position: static; are positioned in the normal flow of the document, and their position is determined by the document's layout algorithm.
The top, right, bottom, and left properties have no effect when an element is set to position: static;.
2.relative:
Elements with position: relative; are still part of the normal document flow, but they can be offset from their normal position using the top, right, bottom, and left properties.
The element's original space in the layout is preserved, meaning nearby elements won't reflow to fill its gap.
3.absolute:
Elements with position: absolute; are removed from the normal document flow and positioned relative to their nearest positioned ancestor (ancestor with a position other than static) or the initial containing block (usually the viewport if no positioned ancestors exist).
They can be precisely placed using the top, right, bottom, and left properties.
Absolute positioning allows elements to overlap one another.
4.fixed:
Elements with position: fixed; are also removed from the normal document flow and positioned relative to the viewport (the browser window).
They remain in the same position even when the page is scrolled, creating elements like fixed navigation bars or pop-up overlays.
5.sticky:
Elements with position: sticky; behave like relative positioning until they reach a specified scroll position, at which point they become fixed.
The element remains in the normal flow of the document until it reaches the defined top, right, bottom, or left offset relative to its nearest scrollable ancestor.
Sticky positioning is often used for creating elements like sticky headers or sidebars.