Position fixed and sticky in CSS - Browser Rendering Trace

Render Flow - Position fixed and sticky

Parse CSS

→Match selectors

↓

Calculate offsets (top, left, etc.)

→Layout elements

↓

Paint elements in final position

→Composite layers

The browser reads CSS, applies position fixed or sticky, calculates where the element should appear relative to viewport or scroll, then lays out and paints it accordingly.

Render Steps - 4 Steps

Code Added:<header>Fixed Header</header>

Before

[Empty viewport]

→

After

[Header]
[__________]
[          ]
[          ]

Adding the header element creates a block at the top of the page.

🔧 Browser Action:Creates DOM node and paints block

Code Sample

A fixed header stays at the top of the viewport always. The second section sticks to 5rem from top when scrolling past it.

CSS

<header>Fixed Header</header>
<main>
  <section>Content block 1</section>
  <section>Content block 2</section>
  <section>Content block 3</section>
</main>

CSS

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: lightblue;
  padding: 1rem;
}

main {
  padding-top: 3.5rem;
}

section {
  height: 10rem;
  border: 1px solid #333;
  margin: 1rem 0;
}

section:nth-child(2) {
  position: sticky;
  top: 5rem;
  background: lightgreen;
  padding: 0.5rem;
}

Render Quiz - 3 Questions

After applying step 2, where is the header positioned?

A At the bottom of the viewport

B At the top of the page, scrolls away with content

C At the top of the viewport, always visible

D In the normal flow below main content

Common Confusions - 3 Topics

Why does my fixed header cover content underneath?

Because position fixed removes the header from normal flow, content does not move down. You must add padding or margin to the content to avoid overlap (see render_step 2).

💡 Fixed elements float above normal flow; add space below them.

Why doesn't my sticky element stick at the top immediately?

Sticky elements only stick after you scroll past their normal position minus the top offset (render_step 4). Before that, they behave like normal elements.

💡 Sticky = normal until scrolled past offset, then sticks.

Why doesn't sticky work inside overflow:hidden containers?

Sticky positioning requires a scrollable ancestor. If the parent has overflow:hidden or no scroll, sticky won't activate.

💡 Sticky needs scrollable container to work.

Property Reference

Property	Value	Reference Point	Visual Effect	Common Use
position	fixed	Viewport	Element stays fixed in viewport, does not move on scroll	Sticky headers, floating buttons
position	sticky	Nearest scroll container	Element sticks to offset when scrolled past, then scrolls normally	Sticky navbars, table headers
top	length or auto	Depends on position	Offset from top edge of reference point	Positioning element vertically
left	length or auto	Depends on position	Offset from left edge of reference point	Positioning element horizontally

Concept Snapshot

position: fixed pins element to viewport, ignoring scroll. position: sticky toggles between relative and fixed based on scroll. Fixed elements overlay content; add spacing to avoid overlap. Sticky needs scrollable container and top offset to work. Use top, left to set offset from reference point.