Blog

Normal Flow, display and Positioning: sticky, z-index, Stacking Contexts and the Top Layer

z-index is only compared between siblings in the same stacking context; sticky sticks relative to the nearest scroll container, which is why overflow: hidden on an ancestor breaks it. On Bookstore's catalog page we keep a float inside its box with flow-root, measure the two-value syntax of display, fix the sticky toolbar with overflow-x: clip, move a badge under the header with isolation: isolate, and show in Chromium and WebKit that a modal dialog in the top layer beats every z-index.