Style tab – Position

Last Update: May 19, 2025
Who can use this feature:
This article is for Editor v4 users. If you’re using Editor v3, check out the relevant article here: Advanced tab

The Position control allows you to fine tune where the element is located on the screen. This includes the ability to layer elements one on top of the other. The Position options are:

  • Static (The default value): The element stays where you place it. If you select Static, there is no option to change the element’s position.
  • Relative: The element’s position relative to its original position. 
  • Absolute: The element’s position relative to the closest parent container whose position is set as Relative. If the element does not have any parent containers that are Relative, the Absolute position  is relative to the webpage.

Example: In this example, we start with a Div Block inside a Div Block. 
image 27 Style tab - Position 1

Each of these Div Blocks have their position set as Relative.
image 28 Style tab - Position 3

Now let’s place an SVG element in Div Block 2 with an Absolute top position of 120 PX, placing it in the lower left of Div 2. 
image 29 Style tab - Position 5

Now we’ll change the Position setting of Div Block 2 to Static. The SVG positions itself 120 pixels from the top of Div Block 1, because that is the closest parent with a Relative position setting.  

Tip
Adjusting an element’s absolute position is one way to place an element on top of another element. For example, if you have a heading above an image and want to place it on top of the image:

  • Set the Position of the heading to Absolute.
  • Set the Z-index to 1 or more. 
  • Increase the Top Margin setting until the heading is over the image.
  • Fixed:  The element maintains a “fixed” position on the page. As you scroll up and down the page, the element stays in the same place, but you can use number fields to adjust the element’s position.
  • In the example below, the image widget is in a fixed position, 20 pixels from the top of the page.
    image 1 Style tab - Position 7

    • Sticky: The element will remain onscreen as visitors scroll down the page, but unlike , the Fixed setting discussed above the Sticky setting is  relative to its parent, so that as visitors scroll down the screen it remains fixed within the parent parent but exits the screen when the parent scrolls out of view. To make an element sticky: Set the Position of the heading to Sticky.
      • Increase the Top setting to 20 PX – this will serve as an offset, meaning: As visitors scroll down the page, the heading will stay on screen, 20 pixels below the top of the page

    Example: In this example, the image is sticky to the top container but when that container scrolls out of site, it disappears.
    image 2 Style tab - Position 9

    Note
    You must enter a number in at least one of the number fields. The number can be zero.
    Note
    In Version 4, Elementor switched from using JavaScript to the CSS Sticky property. The CSS property is lighter and more efficient however, it will not work if the parent element is set to Overflow hidden. For details about overflow options, see Style tab – Size.
    On this page

    Share this article