Position fixed and sticky in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding position: fixed behavior

What happens to an element with position: fixed when you scroll the page?

A It stays in the same place relative to the viewport, not moving when scrolling.

B It scrolls with the page content like a normal element.

C It moves only horizontally but not vertically when scrolling.

D It disappears when you scroll past its original position.

💡 Hint

Think about a sticky note stuck to your computer screen that never moves when you scroll.

An element with position: fixed is fixed relative to the browser window (viewport). It stays visible in the same spot even when you scroll the page.

🧠 Conceptual

intermediate

How position: sticky works

Which statement best describes how position: sticky behaves?

A It disappears when scrolling past its container.

B It behaves like <code>relative</code> until a scroll threshold, then it sticks to a position.

C It behaves like <code>absolute</code> and moves with the nearest positioned ancestor.

D It behaves like <code>fixed</code> all the time, ignoring scroll position.

💡 Hint

Imagine a header that scrolls up but then sticks at the top of the page.

position: sticky acts like a normal element until the viewport scrolls past a defined offset, then it sticks in place.

📝 Syntax

advanced

CSS for sticky header with top offset

Which CSS snippet correctly makes a header sticky at 0 distance from the top of the viewport?

CSS

header {
  /* Your CSS here */
}

A position: relative; top: 0;

B position: fixed; top: 0;

C position: absolute; top: 0;

D position: sticky; top: 0;

💡 Hint

Sticky means it scrolls until it reaches the top, then stays there.

position: sticky with top: 0 makes the element stick to the top of the viewport when scrolling.

❓ rendering

advanced

Visual effect of fixed vs sticky

You have two boxes: one with position: fixed; top: 10px; and another with position: sticky; top: 10px;. What will you see when you scroll down the page?

A The sticky box stays fixed at 10px from top always; the fixed box scrolls normally.

B Both boxes scroll normally and disappear when out of view.

C The fixed box stays visible at 10px from top always; the sticky box scrolls until 10px from top then sticks.

D Both boxes disappear when scrolling past their original position.

💡 Hint

Think about which box behaves like glued to the screen and which one only sticks after scrolling.

The fixed box stays visible at 10px from the viewport top always. The sticky box scrolls with content until it reaches 10px from top, then it sticks there.

❓ accessibility

expert

Accessibility considerations for fixed and sticky elements

Which accessibility best practice should you follow when using position: fixed or position: sticky for navigation bars?

A Ensure keyboard focus can reach all interactive elements and that fixed/sticky bars do not cover content.

B Use fixed or sticky positioning without any additional ARIA roles or focus management.

C Hide fixed or sticky elements from assistive technologies to reduce clutter.

D Avoid using fixed or sticky positioning because screen readers cannot read them.

💡 Hint

Think about users who navigate with keyboard or screen readers and how fixed bars might block content.

Fixed or sticky navigation bars must be accessible by keyboard and not block important content. Proper focus management and ARIA roles help users navigate easily.

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