moves / css / sticky header

Sticky header that actually sticks

`position: sticky` fails silently when an ancestor has `overflow: hidden`/`auto`, or when no offset is set. Give it a `top` and check the ancestor chain.

#position#sticky#z-index
css

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
}

/* breaks sticky children: */
.ancestor { overflow: hidden; }

Related

WWADD — Choose the tool. Make the move. Build the stack.

FREE REFERENCE · NO LOGINCONTACTPRIVACYTERMS