背景图片上的响应式灯箱

Question

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

请在 chrome 上打开此 URL，单击“开始游览”，然后在 Edge

上执行相同操作

如何处理这个问题？

Answer 1

你的做法很糟糕。

该问题也与浏览器无关，因为浏览器的 window 大小会导致游览的叠加元素错位。
对于其他 window 尺寸来说，这只是糟糕的响应式设计。

首先，不要使用背景图像，也不要用于演示。
原因是，覆盖元素需要相对于它所尊重的实际 HTML 元素，而这不能（轻易）用图像完成。

要将一个元素锚定到另一个元素，在本例中，将工具栏符号锚定到叠加解释器元素，您可以将 css 位置属性与顶部、底部、左侧和正确的属性。

锚元素应具有 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;
}

Responsive lightbox on background image