Overlapping content

I want to put this silver leaf framing image to overlap the columns like in the image… so… In edit or layout mode I’ve tried putting the stacks above the columns. Then I use overlap to move the image down, but then the columns UP into mov the space the picture came from… like getting sucked into a vacuum…

Then I’ve tried putting it below and the picture up moving it up… but then that leaves a massive empty space below and the columns don’t get sucked in…

Not sure what to do here.

thanx for any help

Might be better off using the Position stack to place your silver leaf image?

https://foundry.elixirgraphics.com/documentation/position/

I need it to actually go on top though.

Trying to use both stacks together seems no change.

Try experimenting a bit more with the Position stack? You can adjust its Z-Index so it sits on top of other elements on the page.

1 Like

The position stack follows standard CSS hierarchy (wrong terminology!).

What that means is the first position item gets loaded first, the next gets loaded next and on top of the first, the next gets loaded and is on top of the last one, and so on. So, just layer up your Positions accordingly.

That explains it badly, but hopefully you can work it out. I did make some images for you, but can’t post them as a new user.

@TemplateRepo Bumped you to normal user level so you should be good to post images.

LOL, ta. I’ll explain it again then below, with pics!

If in edit mode I layer up the Postions stack like this…

In preview, the last stack, lighter green, is on top of the other two.

This is how CSS works, the last thing loaded in on the top.

If I move the position stacks around like this…

In preview the grey is now on top of the others.

So, just stack, or layer your Position stacks in edit mode in the order you want them to appear: Last Postion stack on top.

2 Likes

I used the Z axis thing and it doesn’t seem to …

9999999 should be high enough…

Is there any way to get some items to not adjust to window size? I have a paragraph that kinda gets messy when window is small… i’d like to keep it from getting squished until the window reaches iphone size vertical…

Hi, have you tried the margin stack?

https://foundry.elixirgraphics.com/documentation/margins

If you are using the Position stack, there should be no need for the Overlap stack. In your screenshot, there is nothing in it. Have you tried simply removing it?

that was disabled at the time. but position stack didn’t work the picture did not overlap the columns above it, so i deleted the position stack…

margin to keep it from adjusting when screen size changes? hm…