Quarto中带标题的图片为何无法置于水印下方？

在Quarto生成的HTML文档中，未添加标题的图片可正常显示在水印下方，但带有标题且在正文中被引用的图片会完全遮挡水印，导致水印在该区域消失。两张图片设置基本一致，仅区别在于是否添加标题并被正文引用。

问题重现代码 #

---
title: | 
    | 文档标题
author:
    - 作者
date: "`r format(Sys.time(), '%d %B, %Y')`"
toc: true
toc_float: true
number_sections: true
format: 
  html:
    theme: lumen
    embed-resources: true
---

<style>
.draft-watermark {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 100px; font-weight: bold; color: #ccc; opacity: 0.5;
}
</style>

<div class="draft-watermark">草稿</div>

```{r setup, message=F, warning=FALSE,echo=F}
# 加载包
library(tidyverse)
library(ggplot2)

Quarto简介 #

Quarto可以将内容和可执行代码整合为最终文档。想了解更多Quarto相关内容可查看官方网站。

运行代码 #

点击渲染按钮后，会生成包含内容和嵌入式代码输出的文档。你可以像这样嵌入代码：

1 + 1

也可以给可执行代码添加选项，比如：

#| echo: false
2 * 2

echo: false选项会隐藏代码，只显示运行结果。

mtcars %>% 
  ggplot(aes(x = hp, y = mpg)) + geom_point()

@fix-ex1

#| label: fig-ex1
#| fig-cap: "水印在此处被遮挡"
mtcars %>% 
  ggplot(aes(x = hp, y = mpg)) + geom_point()

## 解决方案

问题根源是带标题并被引用的图片会被Quarto包装在层级更高的容器中，默认堆叠顺序比水印靠前。只需修改水印的CSS样式，添加`z-index`属性并设置足够大的值，确保水印始终处于页面最上层：

```css
.draft-watermark {
    position: fixed; 
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 100px; 
    font-weight: bold; 
    color: #ccc; 
    opacity: 0.5;
    z-index: 9999; /* 提高水印的堆叠层级 */
}

z-index用于控制元素的堆叠顺序，数值越大，元素在视觉上越靠上。设置为9999可以保证水印不会被页面中的其他内容（包括带标题的图片容器）遮挡。

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