Streaming live at 10am (PST)

Unable to get images to overlap

I’m new to Webflow and have watched most the videos in the Webflow U, but I’m having the hardest time getting images to overlap, so I can then apply a z-index. I’ve tried containing them all in a div block and a container, etc, but they simply stack below one another.

Any help is welcome!

Make sure that your elements are assigned to the “Relative” position. After that you’ll gain access to a number of positioning properties, including the Z-index, which you should think about as layers. An object with a z-position of 10 will stack above an element ranked at only 5, and so forth.

Additionally, if you’re trying to implement 3D into your elements, make sure that either a) the parent div has the “Child Perspective” applied under the ‘2D and 3D settings’ or. b) each element has “self Perspective” for the browser to recognize 3D. To my knowledge, z-index takes precedence over a 3D positioned object even if its positioning is “in-front” of another element.

Thanks, Hunter! I did have the 1st two test images assigned as “relative.” I’m not sure I know how to describe what I’m trying to do, but I’ll give it a go.

What I’m wanting to do is have multiple images, actually 29 of them. I plan to animate them all, coming in from different directions and “landing” in the center of the page, to finally “assemble” as collage.

I created the 29 images in their different respective positions of the collage, all with same overall dimension of the collage. My goal is to have them come flying in and assemble.

Sorry for the long, perhaps confusing description. So, if this makes sense, you can see, I need them all to stack on top of each other. I figured, as I got further into it, I’d be able to adjust the z-index to make it all work.

Unfortunately, the I can’t get them to all occupy the same space. Ideally, I’d like them to stack on top of each other, like a deck of 29 cards.

Again, I hope this wasn’t too confusing and thanks, in advance, for any assistance, guidance, suggestions you might have.

I know I’m new to Webflow, but I’m not new to design. I’m retired now, but was in the field for over 40 years. I used to use Muse, and before that, Dreamweaver (argh) and before that, straight HTML. And so I believe Webflow is the best solution for web design out there and I’m sure it can handle anything I could throw at it - :slight_smile:

Cheers, m|b

Hi @dBogner, it would help to include a read only link to the project. Share a read-only link | Webflow University

Also screenshots of the affected elements and knowing which page in the designer and location of the elements in the navigator, class names etc, will help.

Thanks for responding, Ola. I think I’ll keep plugging away to see if I can figure it out.

1 Like