Layout Position Location Types

The properties used to position an element

The location types are the names of the properties used for moving an element to a specific location:

The default position location type is Constraint using left and top.

The Constraint or anchor option positions by using the left, right, top, or bottom properties. For centered elements a transform property is used. These properties do not have an effect with some position types.

The Padding position option positions by using the padding-left, padding-right, padding-top, or padding-bottom properties. These properties do not have an effect with some position types.

The Margin position option positions by using the margin-left, margin-right, margin-top, or margin-bottom properties. These properties do not have an effect with some position types.

Using the Horizontal and Vertical options

When you use a horizontal option the vertical properties are not set.

When you use a vertical option the horizontal properties are not set.

For example, if you chose Constraint (horizontal) the CSS properties would only include left, right or left and right. This option would exclude the top and bottom properties.

The CSS would look like this:

.MyElement {
    left: 10px;
}

If you chose Constraint (vertical) the CSS properties would only include top, bottom or top and bottom. This option would exclude the left and right properties.

The CSS would look like this:

.MyElement {
    top: 10px;
}

You can also chose the none option to exclude any position location properties.

Changing this option to anything but default or absolute can break your page from what it looks like on the artboard. Make sure you know what you are doing before using this feature and remember you can use Undo and Reset Options button if you need to revert any changes.

position - CSS: Cascading Style Sheets | MDN