javascript - 某些网站不尊重顶部和左侧定位

Question

我正在创建一个扩展以覆盖在页面上并创建一个透明层以仅显示页面上的某些元素。类似于这里的东西 - In this link

首先，对于叠加层，我创建了一个 div overlay，其中包含 position: fixed background: transparent 和 pointer-events: none 和 z-index: 9999 所以这是最顶层。然后我创建了另一个 div(“shadow”)，它根据目标元素的 getBoundingClientRect() 使用 box-shadow 来透视顶部和左侧。

我遇到一个问题，“影子”div 不遵守某些网站上的顶部和左侧定位。我需要为其中一些添加 margin-top 和 margin-left 。这是为什么？

.overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  background-color: transparent;
}

.shadow {
  top: 3935px;
  left: 1008px;
  width: 26.7344px;
  height: 15px;
  border-radius: 100%;
  box-shadow: rgba(184, 20, 129, 0.6) 0px 0px 0px 141.421vmax;
}

<div id="overlay" class="overlay">
  <div id="shadow" class="shadow">
  </div>
</div>

Answer 1

.shadow div 没有position 样式，这意味着它可能默认为position: static。当元素使用 position: static 时，top、left 等不适用。

来自 MDN :

When position is set to static, the top property has no effect.

因此，我完全不确定您是如何让它在任何网站上运行的。在您提供的示例中，带有 box-shadow 的元素也有 position: absolute。