Set the Position and Z-index of an element.
Set how the element is positioned in relation to parent elements or the browser viewport.
- 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.
If you are using position sticky, you can not set overflow hidden on a parent element and you must also set at least one of the following; top, right, bottom, left for sticky positioning to behave as expected.
Position top, bottom, left and right
Set the Top, Bottom, Left and Right position of the element.
- 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
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
Set the z order (or stacking) order of the element.
- Enter a number. The higher the number, the higher it appears on the z order
- Negative values are accepted and lower the z order
- No unit required
Find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/z-index