I’m building a chrome extension where I want to apply an overlay on everything except one selected element.
Do you have idea about how I can overlay except one element even when nested inside of positioned parent ?
Thanks !

My first try was to append a child to body with the following class

.overlay {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    z-index: 99999;
    pointer-events: none;
    width: 100%;
    height: 100%

}

.excluded-element {
    position: relative !important;
    z-index: 100001 !important;
    background-color: white !important;
}

Although, it appears that when my targetted element is nested inside of positioned elements which has z-index set under 99999 then my target element is also under overlay..
I can not set targeted element’s parents z-index because i will ruin the page (I do not own the page)