vsy*_*ync 5 css firefox position
<body>
<div></div>
</body>
body{ -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%);
}
将filter:blur(1px)(或任何其他过滤器)提供给定位元素(Firefox)的父级会使浏览器忽略子级的位置.
有没有人遇到过这种情况并知道解决这种烦恼的方法？
在FF48 beta/win7上测试过
这是因为绝对定位的元素相对于它们的包含块而定位,所述包含块由它们最近的定位祖先建立,或者如果没有这样的祖先则建立初始包含块.
然后,如果不使用filter,则包含块将是初始块,其尺寸与视口相同.
但是,如果你使用filteron body,那将建立一个包含块,即使对于绝对定位的后代也是如此.就像你使用过一样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>相反,我建议设置filteron 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>| 归档时间： |
|
| 查看次数： |
1872 次 |
| 最近记录： |