Unit 1

Demonstrate Positioning


**Here's my example:**


Hello! In this assignment, I demonstrate how Positioning works in CSS. But why is it important? The position property specifies the type of positioning method used for an element: static, relative, absolute, fixed, or sticky. Below each are defined about what they mean and do.

  1. Static: Elements render in order, as they appear in the document flow.
  2. Absolute: The element is positioned relative to its first positioned (not static) ancestor element.
  3. Fixed: The element is positioned relative to the browser window.
  4. Relative: The element is positioned relative to its normal position.
  5. Sticky: The element is positioned based on the user's scroll position A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it sticks in place.
  6. Initial: Sets this property to its default value.
  7. Inherit: Inherits this property from its parent element.

back to top