Always in Sight

position: fixed attaches an element to the browser window. No matter where you scroll, the element will stay firmly in place.

Applications:

Site headers (Headers).
Chat buttons or " Back to Top " .
Modal windows.

Insidious Feature: " Transform Trap "

Warning

If ANY parent of a fixed element has the transform, filter, or perspective property, the fixed element stops being fixed relative to the window and starts behaving like absolute inside that parent.

.modal-overlay {
  position: fixed;
  inset: 0; /* Shorthand for top:0, right:0, bottom:0, left:0 */
  background: rgba(0,0,0,0.5);
}