CSS position Sticky and Z-Index overlay/modal

Question

i have a problem with the position: sticky and z-index

I want my modal in the sticky-element to be overlayed by the overlay. With position: relative it works: the modal is before the overlay. But when I use Sticky the modal is behind the overlay.

Hope it's understandable what I mean. Here's the example:

 .sticky { position: sticky; /* <-- dosen't work */ /* position: relative; /* <-- work */ top: 0; width: 100%; height: 200vh; background: red; } .modal { z-index: 1000; position: fixed; margin: 0 auto; width: 200px; height: 200px; background: yellow; margin: 0 auto; } .overlay { z-index: 999; position: fixed; width: 100%; height: 100%; background: green; top: 0; bottom: 0; left: 0; right: 0; opacity: 0.75; }

 <div class="overlay"></div> <div class="sticky"> <div class="modal">modal</div> </div>

Answer 1

When you set position: relative , the .modal element is relative to the body because it has position: fixed . As such, the z-index value of 1000 put it in foreground.

When you use position: sticky , the .sticky element is positionned, with the default z-index value. Therefore, it positions itself in background because .overlay 's z-index value of 999. .modal being a child of .sticky , it will never be able to go in front of .overlay .

You must change the structure of your HTML, or simply add a z-index on your .sticky element.