0

So I'm trying to insert element markers into client websites, (i.e. I have no control over their site structure, etc.). Now, each of these marker elements is being added with the highest possible z-index, so that they can always appear on the client's website. However, I now want to also add a background, whole-page overlay shadow to the page [to prevent potential contrast with the colors of the client's site]. I want this overlay to appear above every element on the page, except the markers I've inserted (i.e. I want only the markers to appear above the overlay).

This is proving problematic! When I try to insert [1] a pseudo-element (using CSS) for the overlay (giving this element a z-index of MAX_INT-1), it works on many sites. I then give the marker the z-index = MAX_INT. However, on some sites, a marker might need to be inserted as a child of an element with a lower z-index than my pseudo-element [2]. So my inserted marker appears below the overlay (due to the stacking context order) [again, see [2]]. Does anyone have any ideas of what else I can try?

Some ideas I'm thinking of:

  1. Carving out some elaborate clip mask in the overlay, so that it appears to not obscure the markers

  2. (Probably too complicated): placing a placeholder on the page where the markers are (so I know their sizes and coordinates). Then, add new elements for the marker above the overlay and absolutely positioned it to match the coordinates of the placeholders on the page

I'm open to other totally different ideas as well. If you think one of these is the best idea, I would also be happy if you can give ideas of how to implement these.

[1]

body:after {
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 2147483645;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}

.inserted-marker{
    height: 56px; 
    left: 0%; 
    right: 0%; 
    top: 8px; 
    background: rgb(126, 145, 232); 
    filter: drop-shadow(rgba(126, 145, 232, 0.3) 0px 1px 2px); 
    border-radius: 6px; 
    box-shadow: rgba(126, 145, 232, 0.15) 0px 4px 8px 3px, rgba(126, 145, 232, 0.3) 0px 1px 3px;
    z-index: 2147483646; 
    position: relative;
}
<html>

<head></head>
<body>
  <div class='inserted-marker'
       style="">
  </div>
</body>

</html>

[2]

body:after {
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 2147483645;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}

.inserted-marker{
    height: 56px; 
    left: 0%; 
    right: 0%; 
    top: 8px; 
    background: rgb(126, 145, 232); 
    filter: drop-shadow(rgba(126, 145, 232, 0.3) 0px 1px 2px); 
    border-radius: 6px; 
    box-shadow: rgba(126, 145, 232, 0.15) 0px 4px 8px 3px, rgba(126, 145, 232, 0.3) 0px 1px 3px;
    z-index: 2147483646; 
    position: relative;
}

.third-party-container{
    z-index: 1; 
    position: relative;
}
<html>

<head></head>
<body>
  <div class='third-party-container'>
  <div class='inserted-marker'
       style="">
  </div>
  </div>
</body>

</html>
AlanPoser
  • 147
  • 1
  • 10
  • Asking for the "best way" to do something is off-topic without defining some objective method for determining how the "best" will be determined. I've changed your question slightly to make it a "how to" question, assuming that answerers will not respond with substandard methods of performing the task, because if they do, those answers will be downvoted. – Heretic Monkey Jul 24 '22 at 00:32
  • The question could be further improved by providing a [mre] which demonstrates the issue in a [Stack Snippet](https://meta.stackoverflow.com/q/358992) so as to provide answerers with something to go on. – Heretic Monkey Jul 24 '22 at 00:34

0 Answers0