Version:

    Position properties

    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.

    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 TopBottomLeft 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

    DX8 knowledge base icon

    Frequently asked questions

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

    Raise support ticket

    Acquia

    Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.