CSS过滤器取消元素位置[重复]

Question

Demo page

body {
  -webkit-filter: blur(2px);
  filter: blur(2px);
}

div {
  background: blue;
  margin: auto;
  position: absolute;
  right: 0;
  top: 50%;  /*  <---- ignored */
  left: 0;
  height: 200px;
  width: 200px;
  transform: translateY(-50%);
}

<div></div>

将filter:blur(1px)（或任何其他filter）提供给定位元素（Firefox）的父元素会使浏览器忽略子元素的位置。

有没有人遇到过这种情况并知道解决这种烦恼的方法？

---

在 FF48 beta / win7 上测试

Answer 1

这是因为绝对定位的元素是相对于它们的containing block 定位的，这是由它们最近的定位祖先或初始包含块（如果没有这样的祖先）建立的。

那么，如果您不使用filter，则包含块将是初始块，其尺寸与视口相同。

然而，如果你在body 上使用filter，这将建立一个包含块，即使对于绝对定位的后代也是如此。就像你使用position: relative一样。

body {
  position: relative;
}
div {
  background: blue;
  margin: auto;
  position: absolute;
  right: 0;
  top: 50%;
  left: 0;
  height: 200px;
  width: 200px;
  transform: translateY(-50%);
}

<div></div>

相反，我建议在html 上设置filter，并使用height: 100% 使其与视口一样高。

html {
  height: 100%;
  -webkit-filter: blur(2px);
  filter: blur(2px);
}
div {
  background: blue;
  margin: auto;
  position: absolute;
  right: 0;
  top: 50%;
  left: 0;
  height: 200px;
  width: 200px;
  transform: translateY(-50%);
}

<div></div>

Answer 2

body{ 
  -webkit-filter:blur(2px); 
  filter:blur(2px); 
  /* setting the viewport height on body */
  min-height: 100vh;
}

div{
  background: blue;
  margin: auto;
  position: absolute;
  right: 0;
  top: 50%;
  left: 0;
  height:200px;
  width: 200px;
  transform: translateY(-50%);
}

<div></div>

将主体设置为视口的最小高度似乎可行。