Can't get one card to float over another, z-index won't work

Anvil Q&A
1

Hi Anvil Community,

I’m trying to get one column panel to overlap with another. I want it to float on top a bit with a clear background to the inner elements float over the gap a bit.

I can’t get it on to though, the lower element keeps going under:

image
image1029×112 50.6 KB

It’s built with the upper column panel having a role with a background image.
And the lower column panel containing 3 more cards.

I’ve given the lower column panel containing the 3 cards a high z-index, added important, and specifically given the upper panel a lower z index. Still no luck.

Any ideas?

2

Welcome to the Forum!

Anvil attempts to semi-automate some layout decisions, by encapsulating them in different kinds of Container panels.

Column panels assume (and probably enforce) that all their contents are on the same Z plane. After all, that’s their job: to arrange their contents into (non-overlapping) columns.

With an XY panel, by contrast, you explicitly tell it where its contents lie, and it doesn’t attempt to rearrange things to prevent overlap. That’s your responsibility. Contained objects, therefore, can overlap. When they do, the Z axis is implied by the order in which components are added to the panel. The more recently-added it is, the closer it is to the user.

So, one way to deliberately overlap things is to place them on an XY panel, in the desired order.

More HTML/DOM-knowledgeable folks here may have additional ideas.

1 Like
3

Thanks! I’ll try that out and let you know how it goes.

4

I tried that but couldn’t seem to get that to work either. The element with the background seems to always be on top.

Ok, in new blank page I made an XY panel and I am able to make one element overlap on top of another. The most recent one moved is on top. I’m not sure yet why my home page isn’t working.

While I’m here another question. Do you know how I can force a circle to keep it’s shape with screen size changing?

I have an image with 50% rounded borders so it’s a circle. But at larger screen sizes it converts to an oval and I can’t figure out why.

5

In general, another question should mean another Forum post, with an appropriate title. We would like others to be able to easily find your new question (and its answer).

6

:+1: