Lesson: Position Property (static, relative, absolute, fixed)

The position property in CSS controls how an element is positioned in the layout. With position, you can determine where an element sits and how it behaves when the page is scrolled or other elements change. There are four common values: static, relative, absolute, and fixed. Each value helps you control the element in a different way.

• static: The default value where the element follows the normal document flow.
• relative: The element stays in the normal flow, but you can move it slightly from its original position.
• absolute: The element is removed from the normal flow and positioned relative to its nearest positioned ancestor.
• fixed: The element is positioned relative to the viewport and stays in place when the page is scrolled.

Syntax

Follow the code block below to set the position property in CSS:

/* Set element positioning */
position: static | relative | absolute | fixed;

/* Optional: using additional properties for positioning */
top: value;
right: value;
bottom: value;
left: value;

Explanation:

• position:
  • static: Default positioning, where no extra positioning is applied.
  • relative: Allows slight movement from the element’s original position.
  • absolute: Positions the element in relation to its nearest positioned ancestor.
  • fixed: Fixes the element relative to the viewport, keeping it visible during scroll.
• top, right, bottom, left:
  • These properties specify the offset from the respective sides of the container or viewport.

Example 1: Relative and Absolute Positioning

In this example, we position a child element using both relative and absolute positioning. A parent container is set to relative, and a child element is positioned absolutely within it.

Explanation:

• Container (.container):
  • Uses relative positioning so that its child elements can be positioned relative to it.
• Child (.child):
  • Uses absolute positioning, with top: 30px and left: 50px defining its offset within the container.
• Outcome:
  • The child element sits 30px from the top and 50px from the left of the container.

Example 2: Fixed Positioning

In this example, we use fixed positioning to keep a navigation bar in view even when the page is scrolled. The element remains fixed at the top of the viewport.

Explanation:

• Navbar (.navbar):
  • Uses fixed positioning so it stays at the top of the viewport.
  • The properties top: 0 and left: 0 ensure it is placed at the top left corner. Now, even if you will scroll the web page, position of navbar won't change.
• Content (.content):
  • A top margin prevents the content from being hidden behind the fixed navbar.
• Outcome:
  • The navigation bar stays in view as the page is scrolled.

This lesson explains how the position property affects the layout of elements. By using values like static, relative, absolute, and fixed, you can control how elements are arranged and how they behave when the page layout changes.