A sticky bar may hold context: the section name, the filter, the thing the list belongs to. It must not cover the control that has focus, and it must not eat the first line under it. When the page scrolls a focused field into view, that field needs a scroll-margin at least as tall as the bar, plus the room the ring needs.
The ring stays above the bar. A sticky layer with a higher stack order slices through the outline and leaves a focused field that looks broken. Give the focused control a stacking order that keeps the ring complete, or keep the bar clear of it. Check this with the keyboard, not only by scrolling with a pointer.
The demo shows the bar, the first line clear of it, and a field whose ring is fully visible.
How to check it
- Tab to the field under the bar. The ring is complete on all four sides.
- Scroll that field to the top. It stops below the bar, not underneath it.
- Read the first line of the section. The bar does not cover the words.
.bar {
position: sticky;
top: 0;
z-index: 1;
}
.field {
scroll-margin-top: 3.5rem;
}
.field:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
position: relative;
z-index: 2;
}