Hi, I would like to if it's possible to have an UI element on top of another, using containers. This is what I'd like to achieve :

This is what my project looks like, as you can see I'm mosty using vbox and hbox to sort everything

I tried playing with the position of any set element, and while it shows what I want to do, as soon as I change the panel or replay the scene, it goes back to "everything fits as a container" mode. I would like to play with my elements, a bit like in CSS if that makes sense, like setting an element as position : relative and moving it around the grid... Thanks for helping me !

What exactly do you mean with "on top of each other"? Do you mean have them drawn over each other like a label drawn over a button or a panel?

If so, one option might be to use a PanelContainer to contain the Label or another is to parent a Panel(or a TextureRect or whatever it might be) and a Label underneath a CenterContainer then set their order in the tree such that the label would be drawn over the panel.

Thanks for your answer, I'll try to reclarify myself : I used the panelContainer already for labels, what I would like is to have some elements overlap others, like in this picture, having buttons overlapping (half the button being on top of the panel, while the other half is not)

I don't know if that is possible with the panelContainer ? To have a pattern a bit like this basically, but still as part of a vBox or hBox ?

Thanks in advance !

There should be no issue, just set anchoring and size flags on nodes within your Containers appropriately.

Thanks again for answering, but this does not look exactly like the effect i'm trying to achieve.

From the screen you just sent me, how would you proceed for example if you would like to overlap the PanelContainer "My Window" onto the margin container with all the Labels ?

Thanks again for your time, and sorry if I'm not the clearest !

Oh, so you want the 'title bar' of 'My Window' to be floating within the window? An odd choice but probably doable, I'll try to supply a demo file some time today, but a bit busy right this moment.

Ok, I have some time now. For starters, the idea is for you to anchor it to it's parent in however you want then try to set the size and position according to how you want. but one problem you will face is that containers will control their children so as to contain them, so if you want to bring your header outside the parents bounds, you will likely want to use the respective non-container counterpart to whatever container you have been using.

In my previous example you would replace the panel container "PanelCont_MyWindow" with a regular panel and then for an example you could set the VBoxContainer to be bigger than the panel it is parented to. edit: also set a negative value for y position to move it outside the panel, along y.

Does this answer your question? If so, probably no demo of it needed.

OK I think I understood : I have to take off the elements I want "out of" the containers logic, and just manually place them with anchors and margins ?

If that's what you meant, I will try that then :)

Thanks !

Well, it's a bit more complex, you will want to control the panel and it's size according to it's children from a script. Basically you would create your own custom panel container with your own rules for how to contain it's children.

4 months later

Maybe using PanelContainer together with MarginContainer can suit your use case.

3 years later