Z-INDEX order between different level component

z-index error image

As you can see in the above image, there are A, B, C, D components.

C is in A and D is in B

expect result: C is on the B, D is on the A
current result: C is on the B, D is not on the A

Current z-index order is below:
A: relative position, z-index:3
B: relative position, z-index:2
C: absoulte position, z-index:100
D: absoulte position, z-index:999

Please let me know what I have gone wrong and the way which will get expect result.
Thank you

1 answer

  • answered 2021-11-29 04:48 Amini

    A & B : Those are the main components (container), should not have positions other than relative. The z-index must be the same or you can remove z-index from them cause it's not needed.

    C & D : Are the child components and you need to set the z-index a bit higher (e.g. 1 or 2) and they must have the same z-index.

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum