Novice's question: Z-index doesn't work after transformation (fixed)

Design help General
1

I have a “parent” rectangle and another “child” rectangle positioned absolutely behind it (with “-1” Z-index value). I want to skew a parent element.

The problem is that as soon as I start transforming parent element, it flies behind its child and I can’t control it with Z-index anymore(

( Please, see it in the project I shared:
https://preview.webflow.com/preview/z-index-order-is-lost-after-transform?utm_medium=preview_link&utm_source=designer&utm_content=z-index-order-is-lost-after-transform&preview=d0df14abb85f779f2d9f41012b255785&mode=preview )

Could I pull it back to the front somehow?

2

Dear BorinBoris,
I found a quick solution (creating a new parent element over existing parent and transforming it instead) and put it in your project. Is this what you need?

3

Yes, BorinBoris, thanks a lot! You’re the best.

1 Like
4

Hmm, that BorinBoris is too good. In addition to his solution, there are several ways so I will suggest one of mine. Try placing your Divs a little different and formatting as individuals.
image
There is no Z on the purple and red is set to -1.
I tend to think of Zs as layers of papers, 100 hundred of them. So if I want something to show on top, it is assigned a Z of 100. If I want one thing just under, it get a 50. Something under that, 25. This continues down to increments of 10. I don’t want anything less than 10 because if, and only if, I get my layers set and need to squeeze in another I have 9 layers left.
Moral, don’t be cheap with Zs because they are essentially limitless.

1 Like
5

Z-index and Transform aren’t playing in the same team. Not even in the same championship sometimes.

Once you’ve started using Transform, try using Move on Z axis to control the z of your element.

1 Like
6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.