HTML CSS 看不到元素 OpenSeadragon 查看器答案

【问题标题】：HTML CSS Cannot See Element OpenSeadragon ViewerHTML CSS 看不到元素 OpenSeadragon 查看器
【发布时间】：2021-07-21 17:39:42
【问题描述】：

我想念一些简单的东西。我正在使用 OpenSeadragon 查看器 (OSD)，并想在图像上插入一些浮动文本。无论我做什么，观众都是最重要的。我可以看到文本闪烁，但随后查看器将其全部隐藏。带有查看器的 HTML 是：

<body>
    <div class="demoarea">
        <div id="toolbarDiv" class="toolbar">
            ...
        </div>
        <div id="contentDiv" class="openseadragon"></div>
    </div>
</body>

我创建了许多标签来尝试显示浮动在查看器上的文本：

    #watermark {
        -webkit-transform:rotate(-20deg);
        -moz-transform:rotate(-20deg);
        -o-transform:rotate(-20deg);
        transform:rotate(-20deg);
        font-size:200px;
        color:#CCC;
        font-weight:bold;
        letter-spacing:40px;
        position:absolute; 
        z-index:1000000; 
        top:20%;
        left:15%;   
        opacity:0.5; 
        filter:alpha(opacity=50);
    }
    
    .watermark {
        -webkit-transform:rotate(-20deg);
        -moz-transform:rotate(-20deg);
        -o-transform:rotate(-20deg);
        transform:rotate(-20deg);
        font-size:200px;
        color:#CCC;
        font-weight:bold;
        letter-spacing:40px;
        position:absolute; 
        z-index:1000000; 
        top:20%;
        left:15%;   
        opacity:0.5; 
        filter:alpha(opacity=50);
    }
<p>Top</p>
<div id="watermark" style="display:block;">Top</div>
<h1>Top</h1>
<div id="watermark" class="watermark">
    Top
    <span>Top</span>
</div>

我尽量让文字变得令人讨厌，这样即使它快速闪烁，我仍然可以看到它。这正是正在发生的事情。 “顶部”文本的多个实例在瞬间可见，然后被查看器掩盖。

当我查看查看器的 CSS 元素时，整页类的 z-index 为 999999。我将我的 CSS z-index 设置为 1000000，所以它应该在顶部，但它不是。

有人有其他想法吗？

谢谢。

【问题讨论】：

你能提供一个显示问题的sn-p吗？我只能推测您是否有堆栈上下文问题，因为我不知道您的代码中的内容是如何组合在一起的。
@AHaworth - 抱歉刚刚看到这个。这并不简单，因为加载 OSD 查看器需要相当多的基础代码。
你要进入全屏模式吗？在这种情况下，OSD 确实会围绕元素移动。否则不应该。我很想看复制品。您可以以codepen.io/iangilman/pen/bdgWBz 为基础。

标签： html jquery css z-index openseadragon

【解决方案1】：

非常有趣。就好像观众正在删除它无法识别的所有元素。当我在绘制 HTML 后检查它时，我添加的元素在哪里找不到。我不确定我的评估是否正确，但我在绘制查看器后使用 jQuery 添加了 Div，它的工作原理就像一个冠军。

if (!watermark) {
    watermark = $('body').append($('<div/>', {id: 'watermark', class: 'watermark'}));
} // iif

【讨论】：