背景图像上的响应式灯箱答案

【问题标题】：Responsive lightbox on background image背景图像上的响应式灯箱
【发布时间】：2021-12-23 20:02:15
【问题描述】：

我为我的产品创建了一个演示导览，因此我使用了一张图片作为背景，并在其顶部使用了灯箱。所以当我使用Chrome的时候，它看起来很棒但是在其他浏览器上，指针没有指向正确的对象，位置也不一样。

请在 chrome 上打开此 URL，点击“开始游览”，然后在 Edge 上执行相同操作

如何处理这个问题？

【问题讨论】：

标签： velo

【解决方案1】：

你的方法很糟糕。

问题也与浏览器无关，因为浏览器的窗口大小会导致您的游览的叠加元素不对齐。
对其他窗口大小的响应式设计很糟糕。

首先，不要使用背景图片，也不要用于演示。
原因是，overlay 元素需要与它所依赖的实际 HTML 元素相关，而这不能（很容易）用图像来完成。

要将一个元素锚定到另一个元素，在这种情况下，是覆盖解释器元素的工具栏符号，您可以将 css 位置属性与 top、bottom、left 和 right 属性结合使用。

锚元素应具有 css 属性“位置：相对”，并且该锚元素在其内部 HTML 中具有解释器覆盖。
叠加层具有“位置：绝对；”因为它是 css 属性，并且具有顶部、底部、左侧和右侧，因此您可以相对于锚元素随意定位它。

简化代码如下所示：

html:

<div class="anchor" >
  Account
  <div class="explainer">
    This explains everything about your account.
  </div>
</div>

css:

.anchor {
  position: relative
}

.explainer {
  z-index: 99;
  position: absolute;
  top: 100%;
  left: 0;
}

【讨论】：