Page 1 of 1

Overlapping Elements

Posted: Tue Feb 25, 2020 7:54 pm
by 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

Re: Overlapping Elements

Posted: Tue Feb 25, 2020 9:22 pm
by Pablo
You may be able to do this by using a negative margin.

Re: Overlapping Elements

Posted: Tue Feb 25, 2020 9:27 pm
by socialvent
Oh Dear, that was really very easy.
Thanks a lot!!
:roll: :roll:

Re: Overlapping Elements

Posted: Wed Feb 26, 2020 3:29 pm
by 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?

Re: Overlapping Elements

Posted: Wed Feb 26, 2020 4:25 pm
by Pablo
Did you try a negative margin?

Re: Overlapping Elements

Posted: Wed Feb 26, 2020 6:54 pm
by crispy68
What do you mean by box? A shape?

Re: Overlapping Elements

Posted: Wed Feb 26, 2020 8:39 pm
by 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.

Re: Overlapping Elements

Posted: Wed Feb 26, 2020 9:06 pm
by 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.

Re: Overlapping Elements

Posted: Wed Feb 26, 2020 9:40 pm
by paddlefoot
OK Crispy. Thanks for the advice.

Re: Overlapping Elements

Posted: Thu Feb 27, 2020 3:05 pm
by 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.