Question

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

首先，对于叠加层，我使用overlay position: fixed和background: transparent以及pointer-events: none创建了一个div z-index: 9999，以便这是最顶层。然后我创建了另一个div（“shadow”），它使用box-shadow进行透视，使用top＆amp;基于目标元素getBoundingClientRect()离开。

我遇到的问题是“影子”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

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

来自MDN：

当position设置为static时，top属性无效。

因此，我不确定你是如何在任何网站上工作的。在您提供的示例中，position: absolute的元素也有{{1}}。

Answer 2

并非所有的网络浏览器都具有相同的css基本规则，因此您需要的是reset.css或normalize.css - 为跨浏览器创建相同的体验。

PD：你也可以玩opacity（允许0到1之间的值）

参考：

reset.css - https://meyerweb.com/eric/tools/css/reset/

normalize.css - https://necolas.github.io/normalize.css/

希望有帮助：）

在某些网站上，顶部和左侧定位未得到尊重

2 个答案: