Z-index设置异常：水印需置于图片上方、文本下方却无法实现

z-index 仅对非static定位（relative/absolute/sticky等）的元素生效，这是你之前尝试各种层级组合都失效的核心原因。

要实现「页面文本 > 水印 > 图片」的层级效果，按以下配置即可：

• 给图片、水印元素都添加position: relative（或其他非static定位属性）
• 页面文本保持默认static定位（默认层级为0，无需额外设置z-index）
• 水印设置z-index: -1
• 图片设置z-index: -2

这样层级关系就能正常生效：文本在最上层，水印处于文本下方、图片上方，完全满足可读性需求。

如果担心默认定位的文本层级不稳定，也可以给文本标签（比如<p>）显式设置position: relative; z-index: 1，水印设z-index: 0，图片设z-index: -1，这种写法层级逻辑更直观，不容易出问题。

附示例代码：

/* 图片元素 */
.image {
  position: relative;
  z-index: -2;
}

/* 水印元素 */
.watermark {
  position: relative;
  z-index: -1;
}

/* 页面文本（可选） */
p {
  position: relative;
  z-index: 1;
}

另外需要注意：如果这些元素的父级设置了定位和z-index，子元素的层级会被父级的层级范围限制，要确保父级的z-index不会干扰当前元素的层级展示。

内容的提问来源于stack exchange，提问作者user16674741