Design
      Back to home
      1. Knowledge Base
      2. Editor
      3. Design

      Position

      Set the position of your items relative to themselves, to parent or siblings, or to the viewport

      Static

      Every content item has a static position by default, so it will stick to the site flow. Content items with static positioning appear in the order they’re stacked. Without styling added, they won't overlap and different content items won't have different default values. The only reason to set a content item to static is to remove positioning applied to it.
      Static.png

      Relative

      A content item set to relative is positioned relative to its normal position. A relative setting without other positioning attributes added (top, left, bottom, or right), will not be affected. This is because it’s relative to itself exactly as if you left it as static. Setting the top, right, bottom, and left properties of a relative item will move it away from its normal position. Other content won't adjust to fit into any gap left by the item.
      An item with relative positioning can overlap other items without affecting their position or interrupting the normal document flow.
      Two other things happen when you use relative position on an item:
      1. It introduces the use of z-index on that item. This doesn’t work with static items. Even if you don’t set a z-index value, this item will still appear on top of any other static item it overlaps. Z-index is available for any item not set to static.
      2. It limits absolutely positioned child items. Any item that is a child of a relative item, or any position other than static, can be absolutely positioned within that item.
       
      Relative.png

      Absolute

      To remove an item from the normal document flow, absolute position is a great option. The position of an absolute item isn’t affected by other items and doesn’t affect the position of other items.
      By default, the position of the item is relative to the body, but you can position any absolute item inside another item if that parent is set to anything but static.
      Use the positioning attributes top, left, bottom, and right to set the location — these values will be relative to the next parent with settings other than static.
      Absolute.png

      Fixed

      Fixed items are positioned relative to the viewport or the browser window.
      When you scroll down the page, fixed items stay fixed in their positions. This position setting is often used for fixed navigations.
      Fixed.png

      Sticky

      Sticky sections or items will alternate between relative and fixed positioning based on the viewer’s scroll position.
      A sticky item is relative to the document flow until a defined scroll position is reached. At that point, it switches to the behavior of a fixed item within its direct parent. Once the sticky item hits the bottom of its parent, it will stop scrolling.
      You must specify at least one position value for the top, bottom, left, or right side for sticky positioning to work.
      Sticky.png

      Position controls and values

      For relative, absolute, fixed, and sticky position properties, you have the following controls in the Style panel:
      • Position
      • Offset
      • Z-index

      Position

      For items with absolute and fixed positions, you can position the item relative to the body, or any parent that is relative positioned.

      Offset

      Override the default auto value for the top, right, bottom, and left side.
      • Top: increase it to push the item down from the top
      • Left: increase it to push the item off from the left and move it to the right
      • Right: increase it to push the item off from the right and move it to the left
      • Bottom: increase it to push the item up from the bottom

      Z-index

      The Z-index is an item’s position on the imaginary z-axis extending into and out of your computer screen. By default, elements have an auto z-index and elements at the bottom of the page stack above items above them, while elements on the right stack above elements to the left. Static elements always stack lower than positioned elements with a position set to relative, absolute, fixed, or sticky.
      Positioned items may overlap other items in the natural document flow, therefore you can alter the Z-index value of any positioned item to change its default stacking order. Higher values stack on top of lower values. Z-index values can be any integer from 0 to 2147483647. You can also use negative values, but you may lose item visibility as your item will get rendered underneath most items.