Many extensions and gadgets position fixed elements relative to the edge of the viewport, using CSS position:fixed or position:sticky.

In vector-2022 (and some unsupported skins) there may be sticky elements that are part of the core skin, that get in the way of elements that may be positioned there (such as happened in T318474).

One solution to this would be to provide a CSS framework for positioning elements at the various edges of the viewport:

.mw-viewport-top {
  top: 0;
}
.mw-viewport-bottom {
  bottom: 0;
}
// -left, -right

Extra spacing from those edges could be achieved with margin, padding or translate.

Skins that implement sticky features could override these, e.g. vector-2022 could set the following when the sticky header is visible:

.mw-viewport-top {
  top: 50px;
}

Originally reported:

In T318474#8273178, @Tacsipacsi wrote:

It’s also (and still) broken on Timeless, except that it’s not visible at all, since the Timeless sticky header isn’t transparent. Couldn’t we have a more general solution, which fixes Vector and Timeless as well as any third-party skins that have sticky headers?