What is Position in CSS?

In CSS, the position property is used to specify how an element is positioned in the document. It controls how an element is placed relative to its normal flow or to other elements.

Types of Positioning in CSS

1. static (default)
   • The default position of elements.
   • Elements are positioned according to the normal document flow.
   • Top, right, bottom, and left properties do not affect it.
   cssCopyEditdiv { position: static; }
2. relative
   • The element is positioned relative to its normal position.
   • The top, right, bottom, and left properties move the element from its original position without affecting other elements.
   cssCopyEditdiv { position: relative; top: 20px; left: 30px; }
3. absolute
   • The element is removed from the normal document flow.
   • It is positioned relative to the nearest positioned ancestor (an ancestor with relative, absolute, or fixed).
   • If no such ancestor exists, it is positioned relative to the <html> (viewport).
   cssCopyEditdiv { position: absolute; top: 50px; left: 100px; }
4. fixed
   • The element is positioned relative to the viewport (browser window).
   • It does not move when scrolling.
   cssCopyEditdiv { position: fixed; bottom: 10px; right: 20px; }
5. sticky
   • A mix of relative and fixed. The element stays in the normal flow until a specified scroll position is reached, then it sticks to that position.
   • Requires top, bottom, left, or right to work.
   cssCopyEditdiv { position: sticky; top: 0; }

Additional Notes:

• The z-index property works with relative, absolute, fixed, and sticky but not static.
• absolute and fixed elements do not take up space in the normal flow.
• sticky requires a scrolling container to work properly.