Overlapping Elements

[socialvent]

Hello,
I would like to know if it is possible to create overlapping elements in the layout grid.
In my case I would like to have a box protruding into the layout grid above it.
I have already disabled the z-index in the page properties. But I can't find a way to change the z-index of the single elements manually.
Also the input of transform: translation in the html area did not help.
Do you have an idea?
I have added two pictures, how it looks like and how the result should look like.
Thanks a lot for your ideas.

http://www.socialvent.de/actual.png
http://www.socialvent.de/wish.png

[Pablo]

You may be able to do this by using a negative margin.

[socialvent]

Oh Dear, that was really very easy.
Thanks a lot!!

[paddlefoot]

I would like to know how to create that overlapping effect and keep it responsive. I tried inserting a box into the layout grid but it was unresponsive. Any tips?

[Pablo]

Did you try a negative margin?

[crispy68]

What do you mean by box? A shape?

[paddlefoot]

I inserted a shape and clip art but neither was responsive (as noted in the help file). Changing the margin to a negative number did make it overlap but that's not the effect I was looking for since it isn't responsive. I made a box shaped jpg and inserted that with a negative margin and that kinda worked but placement is iffy at best and can add extra weight to a site.

[crispy68]

Change the format that the shape is published as. Set it to CSS3. If you use an image, just make sure to optimize it before adding it. An image can have different sizes in breakpoints. Unless the image is huge, it will add negligible weight to the site.

[paddlefoot]

OK Crispy. Thanks for the advice.

[paddlefoot]

Well dang. I thought I could figure out how to publish as image as CSS3 as Crispy68 suggested but turns out I don't have a clue how to go about doing so. All advice appreciated.