Elements stacking problem

Design help General
1

Hi

I want to organize my slider but Im facing an issue

Right now everything’s stack on top of each other but I need it to be like this:

SPACE JEWELRY

[Rotating ring lottie animation]

Button

*Also even though I set z-index to 9999, the particles are still floating on top of the ring i need them to be behind the ring

Thanks for reading and your support

Here is my site Read-Only: https://preview.webflow.com/preview/thejewelrydesign?utm_medium=preview_link&utm_source=designer&utm_content=thejewelrydesign&preview=424e3a64944e65b691019825b6c66b12&pageId=60273ea44c05ca7bef9be022&mode=preview

2

Does anyone know how to fix this? :slight_smile:

3

@Webflow-user could u help me with this please?

4

I don’t really understand what you are trying to achieve, could you elaborate?

5

The elements are stacked because they’re centered, and positioned in the relative div block called, “Hero Slide”. Change the block’s layout—justify: space between—and set the position of “Particles” to absolute:

stacking
stacking2560×1570 194 KB

Now, about those particles. The higher the z-index, the closer it is to the top. So, when you set “Particles” to 9999, you told the Designer that it should appear on top of everything else. The ring’s z-index has to be higher than that of the particles.

Did any of this help? Let me know if I’ve misunderstood the issue.

6

First of all thanks alot!
Ok so I fixed the layout but even though the ring z-index is set higher than others, the particles are still floating over them. https://preview.webflow.com/preview/thejewelrydesign?utm_medium=preview_link&utm_source=designer&utm_content=thejewelrydesign&preview=424e3a64944e65b691019825b6c66b12&pageId=60273ea44c05ca7bef9be022&mode=preview

Also there is a dark layer thats making the ring darker but i cant find any background thats causing this. Any idea whats going on?

Lastly, when Im in designer, product page looks fine but when i visit the page, it shows me double! https://preview.webflow.com/preview/thejewelrydesign?utm_medium=preview_link&utm_source=designer&utm_content=thejewelrydesign&preview=424e3a64944e65b691019825b6c66b12&pageId=60273ea44c05ca51799bdfb5&itemId=60273ea44c05ca8fa99be213&mode=preview

https://thejewelrydesign.webflow.io/product/space-jewelry-1

7

Hmm, that’s strange. It might be something in the custom code? I’m not sure, yet. First, if you haven’t already, you could try setting the particles’ z-index to -1.

The opacity on “Hero Slider Image” is set to 60%. If you reset it (or just decrease it, if you actually do want opacity), the ring should lighten up.

The product page’s elements (“pp”) somehow got mixed up with the symbol, “HEADER FIXED”. Get rid of those duplicates, and the page should work.

product
product342×530 14.4 KB

8

You are the best. Ill take this as my valentine gift :laughing:
(Seriously thank you so so much!)

Ps. the issue was not z index. it was the opacity! thats why we could see the particles.

Shop page had a bug so I just deleted and readded the symbol.

1 Like
9

Oh, good! I didn’t even consider the opacity. The simplest thing will have you running around the forum for hours. Anyway, I’m glad that I could help!

1 Like