Position and Anchor

Position and Anchor properties are located on the left side of the Element Properties Bar.

Positioning elements

Position is the specific location of an image along the x and y axis relative to the Anchor point of the parent container.

• When you drag elements on a canva you obviously change their position.

• You can also set the position of elements by typing a numeric value in % relative to the anchor in the container (default option) or in px.

In the example below, we see the change of the position relative to the Top Left anchor.

Anchoring elements

Anchoring an element pins or links it to a point on the canvas, so you can specify the Position related to that point. So when the canvas size changes, the element doesn’t change its relative position.

In order to anchor an element to the canvas, click “anchor” icon. Then, decide how you want to anchor the element relative to the parent container.

As you can see, there are 9 Anchor points. 3x3 - horizontal and vertical anchor points.

• 3 Top - left, center, right
• 3 Center - left, center, right
• 3 Bottom - left, center, right

Examples Anchor + Position

Let's take a look at each anchor and how positions change. Notice dotted lines that help you to identify the anchor.

3 Top Anchors:

3 Center Anchors:

3 Bottom Anchors:

To see how to anchor an element in real time, check out this RAD Academy demonstration.