Display, Positioning and Stacking

Understand normal flow, display modes, positioning schemes, containing blocks, stacking contexts, z-index, and layering.

Normal Flow

Normal flow is the browser's default layout behavior. Block-level elements generally occupy available inline space and stack vertically, while inline elements participate in line formatting.

Modern CSS layout systems such as Flexbox and Grid provide controlled alternatives when normal flow alone is insufficient.

Normal Document Flow

Normal Flow

.article {
  max-width: 70ch;
}

.article p {
  margin-block: 1rem;
}

💡 Paragraphs naturally participate in document flow and stack according to their block formatting behavior.

Key Takeaways

Normal flow should generally be the starting point.
Avoid absolute positioning for ordinary document layout.

Knowledge Check

What is normal flow?

Display Values

The display property controls how an element participates in layout. Common values include block, inline, inline-block, flex, grid, none, table, and newer multi-keyword display syntax.

display: none removes the element from layout and accessibility trees in typical browser behavior, while visibility: hidden generally keeps the element's layout space but hides it.

Display Controls Layout Participation

Display Modes

.toolbar {
  display: flex;
}

.badge {
  display: inline-block;
}

.desktop-only {
  display: none;
}

💡 Different display values establish different formatting contexts and layout behaviors.

Key Takeaways

display: none removes an element from layout.
inline-block allows inline participation with block-like dimensions.

Knowledge Check

What happens to layout space when `display: none` is applied?

Positioning

CSS positioning includes static, relative, absolute, fixed, and sticky.

relative keeps an element in normal flow while establishing a positioning context for descendants. absolute removes the element from normal flow and positions it relative to a containing block. fixed typically positions an element relative to the viewport, while sticky combines normal flow with scroll-based sticking behavior.

CSS Positioning Schemes

Relative and Absolute Positioning

.card {
  position: relative;
}

.card__badge {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
}

💡 The card establishes a positioning context and the badge is positioned relative to it.

Key Takeaways

Use relative to establish a positioning context without removing the element from flow.
Absolute positioning should be used for overlays and anchored elements rather than ordinary page layout.

Knowledge Check

Why is `position: relative` commonly applied to a parent of an absolutely positioned child?

z-index and Stacking Contexts

The z-index property controls stacking order within stacking contexts. A common mistake is assuming that a very large z-index always places an element above everything else. It does not cross stacking-context boundaries.

Stacking contexts can be created by several CSS conditions, including positioned elements with non-auto z-index, opacity below 1, transforms, isolation, and other properties.

Stacking Contexts and z-index

Layering

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.modal__dialog {
  position: relative;
  z-index: 1;
}

💡 A modal can establish a deliberate layering hierarchy, but application-wide z-index values should be organized rather than arbitrarily increased.

Key Takeaways

z-index is meaningful within stacking contexts.
Create a documented layering scale instead of using random huge values.

Knowledge Check

Does `z-index: 999999` guarantee an element appears above every element on the page?

Normal Flow

Display Values

Positioning

z-index and Stacking Contexts

STAY UPDATED WITH BYTES!