Constraints are a way to position and anchor an element to a location.
Common constraints are left, top, right, bottom, vertical center and horizontal center.
By default elements are positioned to the top and the left edge of its group.
An elements positioned in the top left edge start at 0. As you increase the top and left (or the x and y) the element is moved to the right and down. The amount moved is in pixels or dots per inch.
An element positioned at top 10 and left 20 is positioned 10 pixels from the top edge and 20 pixels from the left edge.
The left and top correspond to the x and y shown in the artboard when not inside of group.
When an element is inside a group the top and left position is specified from the edge of that group when exported. In XD the x and y are not from the edge of the group but from the edge of the artboard.
The top and left is the default position used when exporting. The default positioning type is absolute.
When the positioning is not absolute, for example, relative, then the top and left are disregarded or treated differently.
To anchor an element to the right and top select the element and open the Element Options panel:
Select the top and right check boxes:
To anchor an element to the horizontal and vertical center of it's container select the element and set the horizontal and vertical options:
To stretch an element to fill it's available width select the left and right positions and remove the width in the styles field:
To prevent an element from being clipped or extending beyond it's group boundaries do the following:
Select the group that the element is in
Open up the Elements Panel
Go to the styles field
Enter a minimum width or minimum height or both
min-width: 500px or
Alternatively set the overflow to
auto to show group scrollbars or
hidden to clip the group contents.