Hello,
I've got a scrollable div with a list of items in it:

I want to add a panel overtop it with 50% opacity. It should remain fixed at the top with the list of item visible behind it:

For the above image, I specified the CSS of the panel like so:
Code:
<div style="width: 100%; height: 200px; background-color: black; opacity: 0.5; z-index: 10; position: absolute; top: 0; left: 0;"></div>
This accomplishes the requirement of having the list of item behind it visible, but it doesn't remain fixed when I scroll.
So then I tried this:
Code:
<div style="width: 100%; height: 200px; background-color: black; opacity: 0.5; z-index: 10; position: sticky; top: 0; left: 0;"></div>

That fixed the panel but as you can from the image above, it pushes the list of items down so that they don't appear behind the panel.
What would be the solution to this?
Bookmarks