添加backdrop-filter后fixed定位元素布局异常求助
固定定位元素因backdrop-filter改变定位的问题
我正在开发第一个WordPress主题,遇到了个棘手的问题:<nav>元素内部包含<div class="burger">,.burger原本以fixed定位在页面底部,但给<nav>添加backdrop-filter: blur(5px);后,.burger的bottom: 0不再相对于<html>定位,而是贴合<nav>底部。
预期定位效果:
添加backdrop-filter后的效果:
HTML代码
<nav> <div class="burger"> <div class="burger-ln" id="ln1"></div> <div class="burger-ln" id="ln2"></div> <div class="burger-ln" id="ln3"></div> </div> </nav>
CSS代码
nav { --nav-background-color: rgba(90, 68, 185, 0.4); --nav-background-color-dark: gray; --nav-text-color: white; --akzent-color: pink; --border-radius: 5px; --nav-padding: 5px; --nav-margin-bottom: calc((var(--nav-padding)) * 3); --nav-margin-top: 5%; --burger-margin-bottom: var(--nav-padding); --burger-margin-right: var(--nav-padding); --burger-hight: 100px; --burger-width: 100px; --burger-ln-high: 10px; --burger-padding: 25px; } nav { background-color: var(--nav-background-color); color: var(--nav-text-color); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border-radius: var(--border-radius); text-decoration: none; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: var(--nav-padding); margin-top: var(--nav-margin-top); overflow: hidden; margin-bottom: var(--nav-margin-bottom); } nav .burger { background-color: var(--nav-background-color); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border-radius: var(--def-border-radius); position: fixed; right: 0; bottom: 0; margin-right: var(--burger-margin-right); margin-bottom: var(--burger-margin-bottom); padding: var(--burger-padding); width: var(--burger-width); height: var(--burger-hight); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; filter: drop-shadow(10px, 10px, 2px, black) }
backdrop-filter属性本不应影响布局,这是Chrome的bug吗?还是我遗漏了什么?
内容的提问来源于stack exchange,提问作者Sedoc
相关产品推荐
相关产品推荐

