This one’s mostly for my own benefit because I’ve struggled with it a few times.

You’ve got the Layout, which comes in the HorizontalLinear/VerticalLinear and Relative Layout. The first two are just shoved in, and dealt with concretely (I’ll have to learn more, but it seems like setPosition(10, 10) moves it 10, 10 from where it should be in line). Relative positioning means that the widget’ll be placed 10, 10 away from whichever widget it was set by setRelativeToWidgetName; if that doesn’t work, you’ll need to use setAlign with something like ui::RelativeAlign::PARENT_TOP_CENTER_HORIZONTAL to set its position to the top center of its parent. You’ll note that there’s two names to a widget, it’s Node::_name and the (presumably) Widget::_relativeName, so you’ll want to be sure you’re using the relative name (as set by setRelativeName) when you’re placing things relatively.

So then once your Widget is in roughly the same place, you’ll want to add a LayoutParameter. These parameters have a Gravity (which again I don’t understand yet) and a Margin, which is the space between the widget and its parent. This doesn’t work recursively, so if you add it to the parent Panel, all its children are not going to have a margin in relation to each other. In order to do that you’ll need to add the parameter with the margin to each of the children. Like all things in cocos, it makes sense if you think about it, just not at first.

Anyway hope this was at least partway helpful.