Intermediate: Positioning
intermediate: positioning positioning — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops reward trade-offs,
Introduction
Positioning — 25 interview questions with traps, follow-ups, and production context. Practice out loud; staff loops reward trade-offs, not definitions.
Business problem
Business pressure: Product teams need Positioning interview questions to ship polished UI without layout regressions, accessibility lawsuits, or LCP regressions that hurt conversion.
- Conversion: Visual polish and performance directly affect checkout and signup funnels.
- Brand: Inconsistent Positioning interview questions implementation fragments design system trust.
- Velocity: CSS debt slows every feature team — architecture matters at scale.
Why this feature exists
Platform history: CSS evolved Positioning interview questions to solve author needs without JavaScript layout engines or table hacks.
- Problem solved: Declarative styling separated from document structure.
- Rejected alternative: Inline styles and JS layout — unmaintainable at enterprise scale.
Browser rendering perspective
Rendering impact: Positioning interview questions affects style recalculation, layout, paint, and composite stages in the browser pipeline.
- Chrome (Blink): Style → LayoutNG → Paint → Viz compositor.
- Firefox (Gecko): Servo-based stylo + WebRender compositing.
- Safari (WebKit): WebKit style resolver + GPU layer promotion rules.
Internal browser workflow
Workflow: Selector match → cascade → computed values → layout tree → paint layers → composite.
Real production example
Production: Netflix, Amazon, and Shopify enforce Positioning interview questions patterns via design tokens, lint rules, and visual regression CI.
Enterprise use case
Enterprise: Design systems (Polaris, Carbon, Atlassian) codify Positioning interview questions in token pipelines and component APIs.
Accessibility considerations
A11y: CSS must not remove focus visibility, break zoom, or convey state by color alone (WCAG 2.2).
Performance considerations
Performance: Positioning interview questions can trigger reflow, expensive selectors, or layer explosion — profile with DevTools Performance panel.
SEO considerations
SEO: CSS affects LCP, CLS, and mobile usability — ranking signals tied to Core Web Vitals.
Scalability considerations
Scale: Positioning interview questions choices compound across micro-frontends, white-label tenants, and dark-mode variants.
Common production issues
Production failures: Specificity wars, z-index stacks, and responsive breakpoints that work in Chrome but break Safari.
Debugging guide
Debug: Chrome DevTools → Elements (computed styles), Layout panel, Rendering layers, Coverage for unused CSS.
Interview questions
What creates a containing block for absolute?(Intermediate)
Positioned ancestor (not static), or transform/filter/perspective on ancestor. Trap: absolute relative to viewport if none.
Follow-up: transform on parent effect?
Why does sticky fail?(Intermediate)
Ancestor overflow hidden/auto, insufficient scroll area, or no top value. Trap: sticky in flex/grid needs align-self start.
Follow-up: sticky in table?
fixed vs sticky during scroll?(Intermediate)
fixed to viewport; sticky within scrollport until stuck. Trap: iOS fixed position bugs historically.
Follow-up: position fixed keyboard?
Stacking context from opacity?(Intermediate)
opacity < 1 creates stacking context — z-index trapped inside.
Follow-up: List stacking contexts?
z-index scale pattern?(Intermediate)
Platform tokens --z-dropdown, --z-modal — avoid 9999.
Follow-up: Modal below toast?
inset shorthand?(Intermediate)
top/right/bottom/left together — inset: 0 full bleed absolute.
Follow-up: inset vs top left?
absolute centering?(Intermediate)
inset 0 + margin auto with defined size, or transform translate — transform affects fixed containing block.
Follow-up: flex vs absolute center?
position and accessibility?(Intermediate)
Visual order changes must not break focus order — avoid tabindex hacks.
Follow-up: Off-canvas nav focus?
clip-path vs overflow hidden?(Intermediate)
clip-path no scroll; hidden clips and scrolls.
Follow-up: Focus ring clipping?
position sticky header?(Intermediate)
top:0 + z-index + background — prevent content show-through.
Follow-up: shadow on sticky?
fixed footer mobile?(Intermediate)
padding-bottom on main for fixed bar height — 100dvh shell.
Follow-up: safe-area-inset?
relative z-index without offset?(Intermediate)
Creates stacking context for z-index to apply.
Follow-up: Why position relative z-index 1?
absolute in responsive grid?(Intermediate)
Grid cell position relative — absolute children anchor to cell.
Follow-up: Overlay badge on card?
position fixed modal backdrop?(Intermediate)
fixed inset 0 backdrop + modal centered flex.
Follow-up: Scroll lock body?
sticky table headers?(Intermediate)
thead th position sticky top 0 — background required.
Follow-up: Sticky col headers?
position and printing?(Intermediate)
fixed elements repeat on pages — use print media overrides.
Follow-up: Print layout?
logical inset?(Intermediate)
inset-inline-start etc for RTL positioning.
Follow-up: left vs inset-inline-start?
anchor positioning (awareness)?(Intermediate)
CSS anchor() emerging — tooltips to buttons.
Follow-up: Popover API CSS?
position isolation?(Intermediate)
isolation: isolate creates stacking context intentionally.
Follow-up: Modal stacking?
absolute height 100%?(Intermediate)
Parent needs defined height — percentage chain.
Follow-up: Fill grid cell?
sticky stack multiple?(Intermediate)
Multiple sticky with different top offsets stack — calc top heights.
Follow-up: Stacked sticky bars?
position and transforms?(Intermediate)
transform creates containing block for fixed descendants — trap.
Follow-up: Demo transform modal bug?
overflow clip?(Intermediate)
overflow: clip no scrollbars — newer than hidden.
Follow-up: clip vs hidden?
position static z-index?(Intermediate)
z-index ignored on static — must change position.
Follow-up: Error z-index not working?
Interview trap: absolute out of flow?(Intermediate)
Absolute removed from flow but still in tab order if focusable — layout gap remains unless handled.
Follow-up: Screen reader order?
Hands-on exercise
Mock interview drill: Answer all 25 questions out loud in 45 minutes. Record yourself explaining trade-offs, not just definitions.
Try it yourself
Edit the CSS panel — the preview updates live. Use DevTools Performance and Accessibility panels to validate.