Need to define Z depth?

[ladlon]

Hi.  I have an image (consider it an image of a room) in a Bootstrap column, and have a number of additional image elements which are being put on top of that image via position:relative tags... and then animated (rotation, position) via GSAP.  All that is working great.

 

The question I have is, do I need to give each element a specific Z depth value, or will it automatically stack them based on the order that each image tag appears in the code?

 

If I DO have to define a Z depth for each, could someone here please confirm the proper coding for that?

[ZachSaucier]

5 hours ago, ladlon said:

do I need to give each element a specific Z depth value, or will it automatically stack them based on the order that each image tag appears in the code?

By default elements in the DOM are stacked with the first declared on the bottom and the most recently declared on the top. With that being said, a child element is locked into the stacking context of its parent by default so keep that in mind. If you place the images in the order you want them to stack and you never need to change that order then you don't need to use z-index.

 

5 hours ago, ladlon said:

If I DO have to define a Z depth for each, could someone here please confirm the proper coding for that?

It's just a matter of applying the z-index property and value to the elements that you want to apply them to  If you need help applying them then it'd be helpful for us to see a minimal demo of your situation. The thread below provides more information about how to create that:

 

[ladlon]

I'm not doing any Z depth adjustment, so your current answer totally works for me!  Thanks!