Z-index and precision overlaid layers

Community How-to
1

Content containers are boxy, by nature, I get that. I want to have one element (an image) on a layer in front of centered across two other elements. Easier to draw than explain. Imagine this is the bottom of container 1 and the top of container 2:

111111111111111111111
222222222222222222222

Container two would be a universal footer, and container one whatever is the last non-footer container on that page. I want to add a logo (I’ll call it L) that is laid out like this:

. . . . . . . . . . . . LLLLLL . . . . . . . . . . . .
. . . . . . . . . . . . LLLLLL . . . . . . . . . . . .
11111111 LLLLLL 111111111
22222222 LLLLLL 222222222
. . . . . . . . . . . . LLLLLL . . . . . . . . . . . .
. . . . . . . . . . . . LLLLLL . . . . . . . . . . . .

[ignore the periods; had to add them to keep the shape laid out right in the forum]

I’m new at SiteJet. I could do this with relative ease in notepad; it’s relatively simple HTML and CSS; but the html option on SiteJet condenses everything into an unmediatable {{content}} marker. I’m sure there’s a way to do this in SiteJet, I just can’t figure it out.

So many questions on Day 1 :slight_smile: I see a lot of potential and want to thrive in this platform. Thanks for any insights you might have on how to do these things.

Cheers!

2

Hi there, and welcome to Sitejet!

I’m not sure what kind of content you would like to put there, but it might be worth having a look at the “FooterTyr” preset in the site builder.
It has a contact form that displays similarly to your sketch.

Maybe there is a way you can replicate this effect using multiple containers? @Andre will this be possible?

3

Hey there,

not 100% sure here if I understood you correctly, but maybe this helps:

image
image1763×745 137 KB

and set Container 1 and 2 to overflow:visible

image
image811×372 41.7 KB

@Giacomo - Thank you for your assist.

1 Like
4

That’s what I was after! Thank you both so much!

1 Like