Can zIndex affect parent/child controls or only siblings?

Questions
,
1

I’m implementing a design for a GUI button and am looking for clarification on how the zIndex property can be used to order controls.

I have successfully added a state layer rect control to a button and utilized the zIndex property to render the state layer on top of the button’s base rect but under the image and the text.

For my current use case, I need to add multiple shadows to the button. I don’t believe this is currently possible so I’m assuming I would need to build a custom button.

Before getting into the custom button I’d be building, I wanted to verify that the zIndex property would allow me to add a control to the button but have it rendered under the button.

Playground Example

What I’m finding is that the zIndex property only seems to affect sibling controls. Is this accurate? Can anyone expand on the zIndex property or point me more detailed documentation?

Thank you in advance!

2

cc our GUI awesome guru @carolhmj

3

Hello! Yeah, the only thing zIndex does currently is to determine the order of sibling controls inside a parent, you can see this on the generic Container code: https://github.com/BabylonJS/Babylon.js/blob/4b508e3a5aabf2637158d67da5dba0295a014e65/packages/dev/gui/src/2D/controls/container.ts#L298

4

Hi @carolhmj, thank you for verifying this for me.

1 Like