Set the Position and Z-index of an element.

Position

Set how the element is positioned in relation to parent elements or the browser viewport.

Position options:

• Static - Set the position according to the normal flow of the document. Space is made for the element
• Relative - Set the position of an element according to the normal flow of the document and then offset the element top, right, bottom and left. The space made in the page layout is the same as if the element is positioned Static
• Absolute - Set the position of an element to an absolute position within its nearest relative positioned parent element. The element is removed from the normal document flow and no space is created for it. Absolute positioned elements will overlap other elements and can be given a z-index that is higher than other elements to appear on top
• Fixed - Set the position of an element in relation to the browser viewport. The element is removed from the normal flow of the document and will not scroll with the page
• Sticky - Set the element as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

Position top, bottom, left and right

Set the Top, Bottom, Left and Right position of the element.

Expected values:

• Enter a number
• 0 (Zero) positions the element against the selected edge
• A positive value moves the element away from the selected edge
• A negative value moves the element over the selected edge

Accepted units:

You can leave blank or specify a unit to be used.

• blank - Add a number with no unit and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within Base unit settings
• px - The value will be applied in pixels
• % - The value will be applied as a percentage of the parent elements height

Note: Additional units are accepted. See https://www.w3schools.com/cssref/css_units.asp

Find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/position

Z-index

Set the z order (or stacking) order of the element.

Expected values:

• Enter a number. The higher the number, the higher it appears on the z order
• Negative values are accepted and lower the z order

Accepted units

• No unit required

Find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Position properties