MySmartCoPilot
Ask Passes Your pass 7 days left 1 day left Last day

Your country

Tools that support it use your country for local currency, number formats, units and paper size. Your choice is saved only in this browser.

CSS Module 9

Normal flow, positioning and stacking interview questions

Interview questions on normal flow, positioning and stacking: warm-ups, then what each harder question tests and how a good answer starts.

6 questions: 2 warm-ups and 4 with model answers · Levels: Fresher to senior

Warm-up questions

Short questions with short answers, each answered in full.

  1. Fresher

    What is the difference between position: absolute and position: fixed?

    Answered in the lesson Positioning: relative, absolute, fixed and sticky

  2. Fresher

    What is a stacking context, and why can a z-index of 9999 still lose?

    Answered in the lesson Stacking contexts and z-index

Questions with model answers

What each question tests, the first step of a good answer and the follow-ups to expect.

  1. Mid to senior

    A fixed chat button worked until a teammate added a page-load animation to the main wrapper. Now the button scrolls away with the page in every browser. Explain why, and give three fixes with their trade-offs.

    What it tests
    Containing blocks of fixed boxes, which properties capture them, animation fill modes, and choosing between a CSS, a markup and a top-layer fix.
    First step
    Read the wrapper's computed transform once the animation has ended. With animation-fill-mode: both it stays at the last frame, matrix(1, 0, 0, 1, 0, 0), an identity transform, and any transform other than none makes the wrapper the containing block of its fixed descendants. The button is now fixed to the wrapper, not the viewport.
    Follow-ups

    From the lesson Positioning: relative, absolute, fixed and sticky

    Opening the model answers with your pass…

    Model answers open with any MySmartCoPilot pass.

    • Pro pass · 1 week₹79$2.99
    • 30 days₹179$5.99
    • 1 year₹1,699$45

    One payment; nothing renews unless you choose to. The price shown is the total you pay: no fees or charges are added at checkout.

    Choose a passI have a licence key

    It also opens every other in-depth part in Learn and every Pro tool. Sales are final, except where the law gives you a right to withdraw, for example in the EU and the UK (refund policy).

    In the answer:

    • Model answer
    • Follow-up answers
    • Common mistakes
    • Rubric
    • Variants
    • about 3 minutes

  2. Mid to senior

    A documentation site has a 64 px sticky header and a sticky sidebar in a flex layout. Users report that the sidebar scrolls away, and an accessibility audit fails WCAG 2.2 success criterion 2.4.11. Diagnose both problems and fix them.

    What it tests
    Sticky positioning inside flex layout, how browsers scroll focus into view, scroll-padding, and what Focus Not Obscured (Minimum) requires.
    First step
    Treat them as two bugs. The sidebar is a flex item, stretched to the full height of its row, so its containing block leaves it no room to move. The audit failure is focus: the browser scrolls a focused link only when it is outside the viewport, so a link that sits under the 64 px header counts as visible and stays hidden.
    Follow-ups

    From the lesson Positioning: relative, absolute, fixed and sticky

    In the answer:

    • Model answer
    • Follow-up answers
    • Common mistakes
    • Rubric
    • Variants
    • about 3 minutes

  3. Fresher to mid

    Product cards have position: relative and z-index: 1 so their hover shadow overlaps their neighbours. Since someone added will-change: opacity to the header for a smoother fade-in, the header's dropdown, z-index: 9999, opens under the cards. Explain why with the painting order, and give two fixes.

    What it tests
    Which properties create stacking contexts, how sibling contexts are compared, and choosing between raising a context, removing one and using the top layer.
    First step
    Look at the header, not the menu. will-change: opacity makes the header a stacking context at all times, at level 0, so the menu's 9999 now counts only inside it. Each card is a context at level 1 in the same parent context, and level 1 is painted after level 0, whole header and menu included.
    Follow-ups

    From the lesson Stacking contexts and z-index

    In the answer:

    • Model answer
    • Follow-up answers
    • Common mistakes
    • Rubric
    • Variants
    • about 3 minutes

  4. Mid to senior

    You inherit a stylesheet with 47 different z-index values, from -1 to 2147483647, and every release brings a new layering bug. Design the system that replaces it, and explain how you would migrate without breaking pages.

    What it tests
    Turning stacking contexts into an architecture: a named scale, isolated components, the top layer for overlays, and a migration that is checked rather than hoped for.
    First step
    Take an inventory before changing anything. Group the 47 values by what they are for: page layers such as the sticky header, overlays such as dialogs and toasts, and values inside components. Each group has a different replacement. Then record which box is on top at the important points of the important pages, so every change can be checked.
    Follow-ups

    From the lesson Stacking contexts and z-index

    In the answer:

    • Model answer
    • Follow-up answers
    • Common mistakes
    • Rubric
    • Variants
    • about 3 minutes

All CSS interview questions · The CSS track