我正在创建一个扩展以覆盖在页面上，并创建一个透明层以仅显示页面上的某些元素。类似于这里的东西 -在这个链接中
首先，对于覆盖，我创建了一个DIVoverlay与position: fixed background: transparent和pointer-events: none和z-index: 9999，使这是最顶层。然后我创建了另一个 div（“shadow”），它使用 box-shadow 根据目标元素的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>该.shadowDIV不具有position的风格，这意味着它可能默认为position: static。top, left, 等等在元素使用时不适用position: static。
来自MDN：
当 position 设置为 static 时， top 属性不起作用。
因此，我不确定您是如何在任何网站上使用它的。在您提供的示例中，带有 的元素box-shadow也有position: absolute.
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句