How to make specific elements inside custom modal appear above an overlay with higher z-index than the modal?

Context:

In my Blazor web app I am trying to implement a feature which will allow me to cover all elements, except some selected ones, with an overlay. Only selected (highlighted) elements should be visible above the overlay.

So far everything worked by changing the class of the elements I wanted to highlight dynamically to a highlighted class which has higher z-index than the overlay element.

The problem:

When I use my custom modal, the elements inside don't appear in front of the overlay even when I apply the highlighted class.

Minimal example:

Here link to jsfiddle (same code as below): https://jsfiddle.net/hartmaj2/x1dg23m4/2/

<div class="overlay"> </div><div class="custom-modal-background"><div class="custom-modal" ><div class="modal-div"><div class="highlighted">            I want to be in front of everything</div></div></div></div><div class="highlighted">  I am in front of everything</div><div>  I am not in front of everything</div>

.custom-modal-background {    position: fixed;    display: flex;    top: 0;    left: 0;    width: 100%;    height: 100%;    background-color: rgba(0, 0, 0, 0.5);    align-items: center;    justify-content: center;    z-index: 1500; }.custom-modal {    position: relative;    display: flex;    background-color: white;}.overlay {    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;    background-color: rgba(0,0,0,0.5);    z-index: 2000;}.highlighted {    position: relative;    background-color: yellow;    z-index: 2100;}

Suspect reasons:

I think that the reason is that the custom-modal-background and custom-modal elements have position: fixed which creates their own stacking context (this property is necessary for them to work properly). Removing the position: fixed property solves the problem but is not a solution for me (unless I find a way to implement my modal without needing this property)

What I have tried:

I tried using a Blazor bootstrap modal instead of my custom one but the problem wasn't solved. Also Chat-GPT proposed moving the element inside DOM using JSInterop but I don't know if that would be a scalable solution. (I would appreciate some thoughts about this also)

Question:

Is there a way to make the highlighted elements inside the custom-modal appear above the overlay elements?

I am looking for a solution that is scalable as I will be using it for many elements which I will mark as highlighted.

Many thanks!