# Ordering overlapping GUI elements

**URL:** <https://forum.babylonjs.com/t/ordering-overlapping-gui-elements/45471>\
**Category:** Questions\
**Tags:** gui\
**Created:** [November 6, 2023, 7:11am UTC](https://forum.babylonjs.com/t/ordering-overlapping-gui-elements/45471 "2023-11-06T07:11:10Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![DavidP](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/davidp/32/45669_2.png) [@DavidP](https://forum.babylonjs.com/u/DavidP)\
**Post date:** [November 6, 2023, 7:11am UTC](https://forum.babylonjs.com/t/ordering-overlapping-gui-elements/45471/1 "2023-11-06T07:11:10Z")

</div>

Hello,  
I assume that zIndex specifies order in which GUI elements are appearing. In the example, below I draw a wood image with index 2, a brick image with index 1, and a button with index 3. Assuming the increasing order, the brick image should be covered by the wood image, but that is not the case at least on my devices

> **[Babylon.js Playground](https://playground.babylonjs.com/#Z6SWJU%23883)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Please let me know how I can specify the order for overlaping UI elements  
thank you

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [November 6, 2023, 9:58am UTC](https://forum.babylonjs.com/t/ordering-overlapping-gui-elements/45471/2 "2023-11-06T09:58:03Z")

</div>

Nah. That’s not quite the way it is. You are using GUI in FS mode. And you are using two ADTs in full-screen (which is already something you shouldn’t do). In full-screen mode, the ADT is a layer that is drawn on top of everything (except for the 3D GUI). So your ordering of controls does not make for the ordering of the ADT layers hosting them. I would stick to the conventional method of using a single FS ADT. You can order things from the hierarchy and you can create containers for each. The GUI Editor is a nice tool to sketch complex layouts for an FS ADT. If you cannot achieve it all through just a single FS ADT, consider adding an ADT for mesh and work it from the camera(s), eventually using layerMask for ordering the layers of GUI when seen from n camera.  
I hope this helps and meanwhile, have a great day 🕶

Edit: forgot to mention that (as per the title of your post) there is a method for ordering overlapping elements/controls… but then, within a single ADT/ADT layer.

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [November 6, 2023, 10:57am UTC](https://forum.babylonjs.com/t/ordering-overlapping-gui-elements/45471/3 "2023-11-06T10:57:11Z")

</div>

Another point of note is that zIndex only works for controls that are on the same hierarchic level, i.e, if you have a parent and a child control, the child will always be on top of the parent, no matter their respective z indexes 🙂

---

<div class="post-metadata">

**Author:** ![DavidP](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/davidp/32/45669_2.png) [@DavidP](https://forum.babylonjs.com/u/DavidP)\
**Post date:** [November 6, 2023, 11:43pm UTC](https://forum.babylonjs.com/t/ordering-overlapping-gui-elements/45471/4 "2023-11-06T23:43:38Z")

</div>

@mawa and @carolhmj Thank you for pointing out the usage of zIndex.  
And yes, once I removed the second ADT, it started to work as expected