An interface can be structurally correct and still fail on a small screen. A menu clips inside an ancestor, a nested scroller traps the reader, a gesture competes with browser zoom, or a keyboard covers the save button. This track treats overlays and scrolling as interaction contracts. It uses a mobile case-review screen with a modal note editor, long activity feed, and optional reordering. Layout, focus, and input must work together across zoom, touch, keyboard, and restored navigation.
Topics in this track
- Stacking Context, Top Layer, and Overlay Contract — Choose modal, popover, or inline UI deliberately and avoid z-index fights across ancestors.
- Scroll Containers, Anchoring, and Chaining — Keep content stable and reachable when nested regions scroll or load new material.
- Pointer Gesture, Touch Action, and Alternate Control — Keep custom gestures compatible with browser panning and equivalent button or keyboard actions.
- Visual Viewport, Keyboard, and Focused Input — Keep active inputs and actions reachable when the on-screen keyboard changes visible space.
Prerequisite paths
CSS Layout and Interface Systems; Complex Accessible Interactions.
Neighbor track
Browser Capabilities and Permission Lifecycle.
Practice path
Build Project: mobile review overlay and scroll and check decisions in Web Development: browser capability and viewport decisions quiz.