javascript 如何永远设置水印为最顶层，不被弹出的子窗口遮盖水印-Go服务器开发

在 JavaScript 中，要实现一个水印始终处于最上层且不被弹出的子窗口覆盖，可以通过创建一个全屏的 div 元素，并使用 CSS 的 position 属性来控制其显示层级。以下是实现的方法：

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Watermark Example</title>
    <style>
        body {
            margin: 0;
            position: relative;
        }

        #watermark {
            position: fixed; /* 使用固定定位 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none; /* 确保水印不会影响点击事件 */
            z-index: 9999; /* 确保水印在最顶层 */
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0.3; /* 可调整透明度 */
        }

        .watermark-text {
            font-size: 50px; /* 水印字体大小 */
            color: rgba(255, 255, 255, 0.7); /* 水印颜色和透明度 */
            transform: rotate(-30deg); /* 水印旋转角度 */
        }
    </style>
</head>
<body>

<div id="watermark">
    <div class="watermark-text">Watermark Text</div>
</div>

<script>
    // 窗口大小变化时更新水印的尺寸
    function updateWatermarkSize() {
        const watermark = document.getElementById('watermark');
        watermark.style.width = window.innerWidth + 'px';
        watermark.style.height = window.innerHeight + 'px';
    }

    window.addEventListener('resize', updateWatermarkSize);
    // 初始化水印尺寸
    updateWatermarkSize();
</script>

</body>
</html>

实现要点

HTML结构：创建一个 div 元素作为水印，并在其中添加文本或图像。
CSS样式：
- 使用 position: fixed 来使水印固定在视口上。
- 设置 z-index 为较高的值（如9999），以确保它位于其他元素之上。
- 设置 pointer-events: none，这样用户可以与底下的内容交互而不会被水印阻止。
JavaScript：通过监听窗口的 resize 事件来更新水印的尺寸，以适应不同屏幕尺寸和方向变化。