Negative Margin problems

I have 2 containers…

Container 1 has a grid with 2 inner containers. Left and right.

I want to show the contents of {container 1:right} 100 pixels over the top of container 2. See the image attached. I want to show the element in yellow on top of container 2.

Can someone advise on what I need to do to get the effect I want? I have tried all manner of z-index combinations and have got close but for some reason it seems to be confusing me :frowning:

My assumption (taken from my Elementor experience) is that I need to negative margin container 2, set it to a lower z-index than container1:right, but this doesnt seem to work.

Any help is appreciated.

Here is a link to the FB topic where I have added an image…