Skip to main content

Position

The position property in CSS is used to control the positioning of an element within its containing element. It's a fundamental concept for layout design and can be particularly useful for creating complex layouts and interactive features.

Below are types of positions.

Static​

This is the default value. Elements are positioned according to the normal flow of the document.

.element {
  position: static;
}

Relative​

The element is positioned relative to its normal position. Offsetting properties (top, right, bottom, left) will move the element from its normal position.

.element {
  position: relative;
  top: 20px;
  left: 20px;
}

Absolute​

The element is removed from the normal document flow and positioned relative to its nearest positioned ancestor. If no positioned ancestor exists, it's positioned relative to the initial containing block.

.element {
  position: absolute;
  top: 0;
  right: 0;
}

Fixed​

The element is positioned relative to the browser window and does not move even if the page is scrolled.

.element {
  position: fixed;
  bottom: 0;
  left: 0;
}

Sticky​

The element is treated as relative until a certain scroll point, after which it becomes fixed.

.element {
  position: sticky;
  top: 0;
}

Key Concepts​

  • Containing Block: The element relative to which a positioned element is offset. For absolute, it's the nearest positioned ancestor; for fixed, it's the viewport; for relative and static, it's the nearest block-level ancestor.

  • Z-Index: Used in conjunction with positioning to control the stacking order of elements. Only works on positioned elements (relative, absolute, fixed, sticky).

  • Offset Properties: top, right, bottom, and left properties are used to position the element within the containing block.

Best Practices​

  1. Avoid Overuse: Overusing absolute or fixed positioning can make layouts hard to manage and less responsive.

  2. Semantic Markup: Use positioning to enhance the layout but not to drive the main structure, which should be defined semantically.

  3. Accessibility: Ensure that positioning does not break the accessibility of the document.

  4. Mobile Responsiveness: Test to ensure that your positioning works well on all screen sizes.

  5. Use with Flexbox/Grid: For complex layouts, consider using Flexbox or Grid layout models, which can reduce the need for explicit positioning.

Understanding the position property can significantly enhance your ability to create complex, interactive, and responsive layouts.

The MDN document for position proeprty