SY25.CS3.Web Development

What the ^position Property Does?

The position property defines how an element is placed in the document flow and how the top, right, bottom, and left properties affect it.

Summary of the CSS position values

• static (default)

  • Elements follow the normal document flow.

  • top, left, right, bottom have no effect.

• relative

  • Element remains in the normal flow but can be shifted relative to its original position using top, left, etc.

• absolute

  • Element is removed from the normal flow and positioned relative to its nearest positioned ancestor (not static).

• fixed

  • Element is positioned relative to the viewport.

  • It stays in place even when the page is scrolled.

• sticky

  • Hybrid between relative and fixed.

  • Element acts like relative until a scroll threshold is reached, then it “sticks” in place.

Note: Images and Youtube video belong to their individual owners, and it is used here for educational purposes only.