As most of you might know, the layout settings are used to control the position of an element. It also helps us to determine the x (horizontal offset), y (vertical offset), and z (stack order) values. Now let us see how we can position an element using these settings.

This property determines how an element is positioned. This includes relative positioning, absolute positioning etc.

With relative positioning, the element is positioned according to the normal flow of the document. To control how the element is placed, you can alter the margin-left, margin-top, margin-right, and margin-bottom values in the right sidebar.

Alternatively, you can also select an element and move it by dragging the blue label. This will also change the margin values of the element.

With absolute positioning, the element is positioned relative to its immediate ancestor, if any; otherwise, it is placed relative to the initial containing block (the body).

Using the input box, you can customize both the value and the unit of the particular field. To change the unit, choose the drop down on the right of the value box. Then you can proceed to change it from pixel to percentage or any other unit of your choice.

Note: An option called ‘Auto’ can also be found inside the drop down. This is an html spec defined auto button. This gives the browser freedom to control the values and units.