Set the Position of Element

Positioning elements correctly is key to creating layouts that look great on all devices. In GemPages Editor, you can control an element’s position using Margins or the Position settings, ensuring flexibility while maintaining responsive design principles.

About Element Position

In web design, the position of an element is relative to its containing parent element. 

For example, a button placed inside a column within a row can only be moved within the boundaries of that column unless otherwise specified.

Margin and Position Settings

• Margin: Moves the element and also shifts nearby elements to maintain spacing.
• Position: Moves the element without affecting the positions of other elements.

Examples for each case will be provided below.

Change Element Position Using Margins 

Margins are a simple way to adjust an element’s position by adding space around it.

Step 1: Select the Element: 

Click on the element you want to change the position.

Step 2: Open the Advanced Tab: 

In the settings sidebar, navigate to the Advanced tab.

Step 3: Adjust Margins in Spacing: 

Use positive margins to add space around the element.

Use negative margins to position elements outside the boundaries of their container for unique designs.

If you set a negative top margin, the element will move upward, and the elements below it will move up as well to fill the gap.

For a detailed guide on margins, see our Margin Settings Article.

Change Element Position Using the Position Settings

The Position setting offers advanced options to control where and how elements are displayed on the page.

Here’s how to edit the position settings of an element:

Step 1: Select the Element

Click on the element you wish to reposition.

Step 2: Go to the Advanced tab, and find the Position Section: 

Choose one of the following options:

• Static:
  • Default setting; the element follows the normal flow of the page.
  • No custom position adjustments are allowed.
• Relative:
  • Moves the element relative to its original position.
  • Adjust custom values for Top, Right, Bottom, or Left to shift its placement.
• Absolute:
  • Positions the element relative to its nearest positioned ancestor (e.g., a Row or Section).
  • Use Top, Right, Bottom, and Left to place the element exactly where you want within its containing element.
• Fixed:
  • Keeps the element in a fixed position relative to the viewport.
  • Great for sticky headers or floating buttons that stay visible during scrolling.
• Sticky:
  • Acts as a hybrid of relative and fixed positioning.
  • The element behaves as relative until it reaches a specific scroll position, then it becomes fixed.

If you set position: relative and apply a negative top value, the element will move upward, but the elements below it will stay in their original positions, as if the moved element hasn’t left its spot.