Bring an Element to the Front or Back Using Z-Index

About Z-index

The Z-index property controls the stack order of elements on a webpage, determining which element appears in front or behind others when they overlap.

Z-index Values:

• Positive values place an element in front.
• Negative values push an element behind others.
• A higher Z-index value means the element is higher in the stack.

Important Note:

• Z-index only works for elements that are in the same layer group.
• A child element’s Z-index is relative to its parent element and cannot override the parent’s stacking order.

Bring an Element to the Front or Back Using Z-Index

Follow these steps to adjust the Z-index of an element in GemPages Editor:

Step 1: Click the element you want to adjust.

Ensure that the element you’re working with overlaps or interacts with another element in the same row or section.

Open the Advanced tab in the settings sidebar. Navigate to Margins and Padding and apply a negative margin on the left side of the element.

This moves the element so that it overlaps with the element on its left.

Step 2: Click on the overlapped element to bring it to the front with Z-index.

In the Settings panel in the left sidebar, go to the Advanced tab, and select Position.

Set the Position property to Relative or Absolute (depending on your layout needs).

• Relative: Keeps the element in its normal flow but allows Z-index adjustments.
• Absolute: Removes the element from the normal flow, positioning it based on the nearest positioned ancestor.

Adjust the Z-index value:

• Enter a positive value (e.g., 10, 100) to bring the element forward.
• Enter a negative value (e.g., -1) to send the element backward.

In this case, choose Relative and set the Z-index to 2.