CSS筛选器取消元素位置 [英] CSS Filter cancels element position

问题描述

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)(或任何其他过滤器)定位元素的父元素(Firefox)使浏览器忽略子元素的位置.

Giving filter:blur(1px) (or any other filter) to a parent of a positioned element (Firefox) makes the browser ignore the child's position.

有人遇到过这种情况，并且知道解决此烦恼的方法吗?

Has anyone encountered that and know a way to fix this annoyance?

在FF48 beta/win7上测试

推荐答案

这是因为绝对定位的元素相对于其包含块，由其最接近的祖先确定；如果没有这样的祖先，则由初始包含的块确定.

That's because absolutely positioned elements are positioned relatively to their containing block, which is established by their nearest positioned ancestor, or the initial containing block if there is no such ancestor.

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

Then, if you don't use filter, the containing block will be the initial one, which has the same dimensions as the viewport.

但是，如果在body上使用filter，即使对于绝对定位的后代，也会建立一个包含块.就像您使用position: relative一样.

However, if you use filter on body, that will establish a containing block, even for absolutely positioned descendants. It will be like if you used 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%使其与视口一样高.

Instead, I recommend setting the filter on html, and use height: 100% to make it as tall as the viewport.

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筛选器取消元素位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！