Z-index 在图像上方放置水印但在文本下方不起作用

Question

我想要我的文本水印在图像上方但在页面文本下方可见以便页面文本保持可读性。

我尝试了各种组合，但无济于事。例如，我不明白为什么将水印设置为 z-index = -1 会将其放在文本下方，但是当我将图像设置为 z-index = -2（或 -100）时，它不会显示我想要的内容。

我还尝试将水印设置为显示在图像上方的 z-index=1，然后设置 [p] z-index=100 它不会将文本放在水印上方。

假设文本最好保留默认值（没有设置为假设 0），然后通过设置 z-index = -1 为水印和 z-index = -2 为图像，理论上它应该按需要显示。

但这个理论是行不通的。

（不使用固定定位）

Answer 1

z-index 仅在指定位置属性时有效。您可能已经为水印定义了“位置”，但您还需要为文本指定“位置”。例如：

p {
position: relative;
z-index: 10;
}