In my Blazor site, my <main> contains both the .container for my @Body content and a background <img>. I recently went from allowing the entire <body> to scroll to having a sticky <nav> and scrolling content inside the .container in <main>. For some reason, this caused the #background-image to sit on top of the .container scrollbar when it’s present, as seen here:
Background image on top of scrollbar
Here is the HTML for <main> in my MainLayout.razor file:
<main>
<div class="container">
@Body
</div>
<img id="background-image" alt="" src="assets/background.webp" />
</main>
Here is the relevant CSS:
main {
bottom: 0;
left: 0;
overflow-y: auto;
padding-bottom: 1rem;
padding-top: 1rem;
position: fixed;
right: 0;
top: 4rem;
}
#background-image {
bottom: -8rem;
filter: opacity(25%);
overflow: hidden;
pointer-events: none;
position: fixed;
right: -2rem;
z-index: -1;
}
The background image was already set to z-index -1 when the change was made, and adjusting the z-index of the #background-image or the .container doesn’t seem to do anything. Neither does adjusting the structure of the HTML.
How can I let the .content scrollbar sit on top?