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.

Practice

1. What does position: fixed; do to an element on a webpage?

easy

A. Keeps the element always visible in the same spot on the screen, even when scrolling.

B. Makes the element scroll normally with the page content.

C. Positions the element relative to its parent container.

D. Hides the element when the page is scrolled.

Solution

1. Step 1: Understand fixed positioning

   Elements with position: fixed; stay in the same place on the screen regardless of scrolling.

2. Step 2: Compare with other positions

   Unlike normal flow or relative positioning, fixed elements do not move when the page scrolls.

3. Final Answer:

   Keeps the element always visible in the same spot on the screen, even when scrolling. -> Option A

4. Quick Check:

   Fixed = Always visible on screen [OK]

Hint: Fixed means element stays put on screen during scroll [OK]

Common Mistakes:

• Thinking fixed elements scroll with the page
• Confusing fixed with relative positioning
• Assuming fixed hides the element

2. Which of the following is the correct CSS syntax to make an element sticky at 10px from the top?

easy

A. position: relative; top: 10px;

B. position: fixed; top: 10px;

C. position: absolute; top: 10px;

D. position: sticky; top: 10px;

Solution

1. Step 1: Identify sticky syntax

   The correct way to make an element sticky is using position: sticky; with an offset like top: 10px;.

2. Step 2: Check other options

   Fixed keeps element always on screen, absolute positions relative to nearest positioned ancestor, relative moves element relative to normal spot.

3. Final Answer:

   position: sticky; top: 10px; -> Option D

4. Quick Check:

   Sticky syntax = position: sticky + offset [OK]

Hint: Sticky needs position sticky plus top/left/right/bottom [OK]

Common Mistakes:

• Using fixed instead of sticky
• Forgetting to add top offset
• Using relative or absolute incorrectly

3. Given this CSS and HTML, what will happen when you scroll the page?

<style>
header {
  position: sticky;
  top: 0;
  background: lightblue;
  padding: 1rem;
}
</style>
<header>Sticky Header</header>
<div style='height: 2000px;'>Content</div>

medium

A. The header stays stuck at the top of the viewport when scrolling down.

B. The header scrolls away with the page content.

C. The header stays fixed at the bottom of the page.

D. The header disappears when scrolling starts.

Solution

1. Step 1: Understand sticky with top: 0

   The header will scroll normally until it reaches the top of the viewport, then it sticks there.

2. Step 2: Visualize scrolling effect

   As you scroll down, the header remains visible stuck at the top, making it easy to access.

3. Final Answer:

   The header stays stuck at the top of the viewport when scrolling down. -> Option A

4. Quick Check:

   Sticky + top:0 = sticks at top on scroll [OK]

Hint: Sticky sticks at offset after scrolling reaches it [OK]

Common Mistakes:

• Thinking sticky behaves like fixed always
• Assuming header scrolls away immediately
• Confusing top: 0 with bottom positioning

4. You want a navigation bar to stay visible at the top when scrolling, but your CSS uses position: sticky; and it doesn't stick. What is a likely cause?

medium

A. You forgot to add position: fixed; instead.

B. The element has no width set.

C. The parent container has overflow: hidden; or overflow: auto;.

D. The element is inside a <footer> tag.

Solution

1. Step 1: Check parent container overflow

   Sticky positioning requires the parent container not to clip overflow; overflow: hidden; or auto can prevent sticky from working.

2. Step 2: Understand sticky requirements

   Sticky depends on scroll container; if parent clips overflow, sticky won't stick.

3. Final Answer:

   The parent container has overflow: hidden; or overflow: auto;. -> Option C

4. Quick Check:

   Sticky fails if parent clips overflow [OK]

Hint: Check parent overflow to fix sticky not working [OK]

Common Mistakes:

• Switching to fixed without need
• Ignoring parent container styles
• Assuming tag type affects sticky

5. You want a sidebar that stays visible on the left side as you scroll down, but only after you scroll past its original position. Which CSS setup achieves this behavior?

hard

A. Use position: fixed; left: 0; on the sidebar.

B. Use position: sticky; top: 0; on the sidebar inside a tall container.

C. Use position: absolute; left: 0; top: 0; on the sidebar.

D. Use position: relative; left: 0; on the sidebar.

Solution

1. Step 1: Understand sticky sidebar behavior

   Sticky lets the sidebar scroll normally until it reaches the top, then it sticks there, perfect for this use case.

2. Step 2: Why not fixed or absolute?

   Fixed would always keep sidebar visible, ignoring scroll position. Absolute positions relative to container but doesn't stick on scroll.

3. Final Answer:

   Use position: sticky; top: 0; on the sidebar inside a tall container. -> Option B

4. Quick Check:

   Sticky = scroll then stick at offset [OK]

Hint: Sticky sticks after scrolling past original spot [OK]

Common Mistakes:

• Using fixed which ignores scroll position
• Using absolute which doesn't stick on scroll
• Using relative which just shifts position