Change position of side cart code in HTML file

Hi, thanks for the quick response.

My webdesign is a little unusual, I try to explain it:

The design is built up in two “layers”:
– A “background” div that holds full sized visual content (slideshow and videos).
– On top of it a “content” div with all the content:

<div id="page">    

    <div id="background">
        <!-- My Image Slideshow -->
    </div>

    <div id="content">
        <header>...</header>
        <main>...</main>
        <footer>...</footer>
    </div>

</div>

I have set my whole content in my “content” div to be white (text only, but including some fixed elements that “cover” some of the other content) on a transparent background (to show the content of “background”), so I’ve set its background-color to black and its mix-blend-mode to “screen”:

#background {
	z-index: 0;
}

#content {
        color: #fff;
        background-color: #000;
        z-index: 1;
        mix-blend-mode: screen;
}

Now all of my content is white on transparent background, when I do for example a white Button with black type on it, the type is transparent and the background is shining through it.

So now I would like to put my sidecart into the “content” div to have it on the same layer. Otherwhise the sidecart-container has a black background that covers my “background”, and if I set its mix-blend-mode to “screen”, the content underneath shines through.

So is there any possibility to put the “xoo-wsc-modal” div into my “content” div?

Thank you!