You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

添加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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.08 00:15:48