使用 Z-Index 将元素置于最前面或最后面

什么是 Z-index？

Z-index 是一个 CSS 属性，它控制 堆叠顺序 网页元素的 Z-index 值——决定元素重叠时哪个元素显示在最上面。Z-index 值越高，元素显示在最前面；Z-index 值越低（或为负值），元素显示在最后面。

Z-index 的关键规则

• 正值 （例如，10，100）带来一个元素 前锋 在堆栈中。
• 负值 （例如 -1）推送一个元素 背后 其他
• 更高的价值 总是出现在较低的前面。
• 重要提示：Z-index 仅适用于元素 在同一层或同一部分内。它还尊重 父子层次结构，这意味着子元素在视觉上无法脱离其父元素的堆叠上下文。

如何在 GemPages 中调整 Z-index

按照以下步骤直接在 GemPages 编辑器中控制元素的 Z 索引：

步骤 1：创建元素之间的重叠

• 单击要重新定位的元素。
  
• 在左侧边栏中，打开 先进的 标签。
  
• 下 边距和填充，套用 负边际 （例如，在左侧）移动元素，使其与同一行或同一部分中的另一个元素重叠。
• 打开 先进的 标签 在设置侧栏中。导航至 边距和填充 并套用 负边际 在元素的左侧。
• 这会使元素移动，以便它与左侧的元素重叠。
  

这一步对于看到 Z-index 变化的视觉效果是必要的。

步骤 2：设置位置和 Z 轴索引

• 单击应该出现在前面（或后面）的元素。
• 在“设置”面板的“高级”选项卡中，找到“位置”属性。

• 将位置设置为：
  • 相对：保持元素处于正常布局流中但允许堆叠。
  • 绝对：将其从布局流中移除，并相对于最近的定位祖先进行定位。

• 现在，向下滚动到 Z-index 字段：
  • 输入一个正值（例如，2、10、100）以使元素向前移动。
  • 输入负值（例如 -1）可将其向后发送。

示例：选择“相对”并将 Z-index 设置为 2，以使元素位于重叠内容的前面。