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

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>

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

Answer 2

这是因为绝对定位的元素是相对于它们的 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>

相反，我建议将 filter 设置为 html，并使用 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>

CSS 过滤器取消元素位置

CSS Filter cancels element position

css

firefox

position

Demo page