leverage CSS grid
stacking + position:sticky

scroll.supply

scroll for the effect

Create a scroll window effect from CSS layout

The trick here is to use CSS subgrid + position: sticky.

Overlap and stack elements with CSS grid

You can stack elements by putting them in the same cell with grid-row and grid-column.

Make use of outline to create a frame

Put an element in the second column spanning all rows. Inset it and give it a big outline.

Finish it off with sticky positioning

Stick the frame and backdrop whilst scrolling the content.

scroll.supply

A

B

C

D