Positioning is all relative.pos="1,2".
1 is horizontal. negative value moves left, positive value moves right.
2 is vertical. negative value moves down, positive value moves up.
first you have the anchor points.
CenterBottom,CenterTop,LeftTop,LeftCenter,LeftBottom,RightTop,RightCenter,Rightbottom.
This defines the "Starting" location (if you will), starting point is always 0,0 of the anchor location.
In the case of the toolbelt, to have it centered properly, it needs to be moved left so that the first 4 item slots are before 0,0 (pos -240,x)
Following this, you will then have a container (often a rect or panel). The position that you set this container to is relative to the parent positioning.
in the image above, the container (green) would be set to pos="20,-20". its positioning is relative to the main window. (grey) top left corner. (that's the green containers 0,0)
After that you have any items/labels etc. All their positioning is relative to the green container. 0,0 is top left corner of green box for an item nested within.
Once you understand that, then comes the pivots.
If you see an item that has (pivot="center") it means that it will pin said item (usually a icon) to the center point of the container. If a pivot is used, positioning is still relative to the container, but you must specify the pin point of the container.
Using the toolbelt as an example, it has a 60x60 container for the toolbelt slot.
the icons, use pivot center so their position = [pos=30,-30"] as this is the center point of the container 60wx60h.
TLDR: everything is relative to the parent.
