Stacking and overflow

Content can overflow when a box is smaller than what it contains.

.code-sample {
  overflow-x: auto;
}

Prefer scrolling or wrapping to clipping important content. overflow: hidden clips and creates a scrolling mechanism even when no scrollbar is shown; it can also change sticky behavior. Avoid clipping focus outlines and controls that keyboard users must reach.

z-index controls stacking within a stacking context. A large number does not escape an ancestor’s context. Properties such as positioned z-index, opacity, and transforms can create new contexts.

Other context creators include fixed or sticky positioning and container-type: inline-size. Once an ancestor forms a stacking context, all of its descendants are painted as one unit relative to sibling contexts.

When a menu appears behind another panel, inspect both ancestors. The problem is often not that the number is too small; the elements are competing in different contexts.

Keep a small, named layer scale for normal interfaces instead of escalating to arbitrary values.

Native dialogs and popovers can enter the browser’s top layer, which sits above ordinary stacking contexts. Prefer that platform behavior for true modal UI instead of trying to outbid every z-index.

Use the DevTools stacking-context view when available. Toggle ancestor opacity, transform, positioning, and overflow—not just the child’s number—until the layer tree explains the result.

Quick check

Result

You got of right.

Try again