Display Modes & Positioning Mechanics

The layout engine determines how elements are formatted, rendered, and positioned in relation to the document flow. Understanding the display property and CSS positioning schemes is essential for creating structured web layouts.

1. Core Display Modes

The display property determines how an element behaves in the normal document flow and how its child nodes are laid out.

                [ CSS Display Modes ]
                          │
 ┌────────────────────────┼────────────────────────┐
 ▼                        ▼                        ▼
[ Block ]               [ Inline ]            [ Inline-Block ]
Full-width box;         Flows inline;         Flows inline;
Respects box dimensions  Ignores width/height  Respects box dimensions

Outer Display Value Comparison

Display Mode	Formats New Line?	Respects `width` & `height`?	Vertical `margin` / `padding` Effect	Example Tags
`block`	Yes	Yes	Fully respected	`<div>`, `<p>`, `<h1>`-`<h6>`, `<section>`
`inline`	No	No	Ignored (does not push surrounding lines)	`<span>`, `<a>`, `<strong>`, `<em>`
`inline-block`	No	Yes	Fully respected	`<button>`, `<input>`, `<img>`
`none`	N/A	N/A	Removed entirely from render tree	Utility classes (e.g., `.hidden`)

display: none vs visibility: hidden

display: none: Removes the element completely from the document flow. It consumes no space on the page.
visibility: hidden: Hides the visual output of the element, but the element still occupies its layout space in the document flow.

2. CSS Positioning Schemes

The position property dictates how an element is placed within the document layout using offset properties (top, right, bottom, left).

The 5 Positioning Values

┌─────────────────────────────────────────────────────────────┐
│ 1. static (Default normal document flow)                    │
├─────────────────────────────────────────────────────────────┤
│ 2. relative (Offset relative to its OWN normal position)    │
├─────────────────────────────────────────────────────────────┤
│ 3. absolute (Positioned relative to nearest ANCESTOR        │
│               with position != static)                      │
├─────────────────────────────────────────────────────────────┤
│ 4. fixed (Positioned relative to VIEWPORT; stays on scroll) │
├─────────────────────────────────────────────────────────────┤
│ 5. sticky (Toggles between relative and fixed based on      │
│              scroll position)                               │
└─────────────────────────────────────────────────────────────┘

1. `static` (Default)

Elements render in the normal document flow in sequential order. Offset properties (top, right, bottom, left) and z-index have no effect.

2. `relative`

The element remains in the normal document flow, but is visually offset relative to its original static position. The space originally reserved for it is preserved in the layout.

3. `absolute`

The element is removed from the normal document flow. It is positioned relative to its nearest ancestor element whose position value is non-static (relative, absolute, fixed, or sticky). If no such ancestor exists, it positions relative to the Initial Containing Block (<html>).

/* Containing Parent Context */
.card {
  position: relative; /* Establishes positioning boundary for children */
  width: 300px;
}

/* Positioned Child */
.card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

4. `fixed`

The element is removed from the normal document flow and positioned relative to the browser viewport. It remains pinned in the exact same location even when the user scrolls the page.

5. `sticky`

A hybrid model. The element behaves like position: relative until its parent container reaches a specified scroll threshold (e.g., top: 0), at which point it pins in place like position: fixed within its containing block.

3. Stacking Contexts & `z-index`

The z-index property determines the rendering order along the Z-axis (depth) when elements overlap.

z-index only works on positioned elements (position value other than static) and Flex/Grid items.
Higher z-index values render closer to the user, covering elements with lower values.

       [ Z-Axis Rendering Order ]

            ┌──────────────┐ (z-index: 3) [Top]
         ┌──┴───────────┐  │
      ┌──┴───────────┐  │  │
      │  z-index: 1  │  │──┘
      │              │──┘
      └──────────────┘ (z-index: 0 / Normal Flow) [Bottom]

Stacking Context Pitfalls

Setting z-index: 9999 will not bring an element to the front if a parent container creates a separate Stacking Context with a lower z-index. A child element cannot break out of its parent's stacking context.

A new Stacking Context is created by:

Root element (<html>)
Positioned elements (relative/absolute) with a non-auto z-index
Elements with opacity less than 1
Elements with transform, filter, or perspective properties applied

Interactive Playground: Positioning Schemes

Toggle positioning behaviors and test absolute coordinates relative to a container boundary in the live editor below:

Loading Interactive Editor...

Summary Reference Table

Position Value	Removed from Normal Flow?	Positioned Relative To	Requires Ancestor Boundary?
`static`	No	Normal document flow	No
`relative`	No	Its own default location	No
`absolute`	Yes	Nearest non-static ancestor	Yes (`position != static`)
`fixed`	Yes	Browser Viewport	No
`sticky`	No (until threshold)	Viewport boundary inside container	No

1. Core Display Modes​

Outer Display Value Comparison​

2. CSS Positioning Schemes​

The 5 Positioning Values​

1. static (Default)​

2. relative​

3. absolute​

4. fixed​

5. sticky​

3. Stacking Contexts & z-index​

Interactive Playground: Positioning Schemes​

Summary Reference Table​