模糊过滤器移动定位的孩子[重复]

Question

我正在尝试对大部分页面应用简单的模糊，而另一个元素位于顶部，不模糊

<div class="stufftobeblurred">
   <header>
     ...
   </head>
   ... most of page is here ...
</div>
<div class="stuffontop">
  ... this isn't blurred ...
</div>

（使用 CSS 如下）

.stufftobeblurred {
  filter: blur(2px);
}
header {
  position: absolute;
  ...
}

这可以正常工作，只是在模糊处于活动状态时移动了定位的标题。 请参阅此小提琴，我已将其分解为尽可能少的复制。

https://jsfiddle.net/8hr72gs3/

取消注释模糊并观察蓝色矩形移动。

我已尝试按照搜索结果的建议应用 z-index:0; 和 transform:translateZ(0)，但这似乎没有效果。

即使模糊半径为 0，元素仍会移动。

注意在小提琴中，如果我将margin:0; padding:0 应用于身体，它似乎可以解决问题，但是在我的实际场景中这不起作用。我不知道小提琴和我的真实场景之间的语义差异是什么，所以如果有人能告诉我为什么这个填充/边距应该在小提琴上起作用，它可能有助于进一步诊断。

此外，如果将小提琴修改为具有外部 div，则该技巧不再有效（如果应用于外部 div 而不是主体，添加或不添加 position:relative）

Answer 1

对我来说似乎很奇怪。但显然添加：

margin-left: -8px;
margin-top: -8px;

删除filter: blur 上的移动。

在 66.0.1（64 位）和 Chrome 版本 73.0.3683.86（官方构建）（64 位）中测试

应该已经修复了https://bugzilla.mozilla.org/show_bug.cgi?id=1125767

.blurme {
  filter: blur(1px);
  margin-left: -8px;
  margin-top: -8px;
}

.blurme:hover{
  filter: blur(0);
}

.positionme {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: blue;
}

<div class="blurme">

  <div class="positionme">


  </div>
</div>

或者添加：

position: absolute;
left: 0px;
top: 0px;

可以将它们固定在左上角。

.blurme {
  filter: blur(1px);
  position: absolute;
  left: 0px;
  top: 0px;
}

.blurme:hover{
  filter: blur(0);
}

.positionme {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: blue;
}

<div class="blurme">

  <div class="positionme">


  </div>
</div>