React中backdrop-filter模糊层覆盖上层元素问题求助

问题 #

开发React Web应用时实现了跟随鼠标移动的Blob效果，通过在Blob上方添加div并使用backdrop-filter属性实现模糊（避免直接模糊Blob出现同心圆问题），功能本身正常。但在Blob上方添加.block div后，发现backdrop-filter会模糊所有上层元素，即使DevTools确认.block处于最上层，问题仍未解决。

解决方案 #

问题根源 #

1. .blur元素设置了position: absolute但无父级定位上下文，会相对于整个视口铺满全屏，它的backdrop-filter会模糊所有处于其下方的元素。
2. .block未设置position属性，z-index无法生效，无法真正覆盖在.blur上方。

修复步骤 #

• 给Blob组件的外层div添加position: relative，让.blur仅相对于Blob容器定位，只覆盖Blob区域。
• 调整.blur的尺寸和定位，使其与Blob完全重合，不再铺满全屏。
• 给.block添加position: relative，确保z-index属性生效，让它真正处于最上层。

修改后的代码 #

Blob组件代码

import { useEffect } from "react";

const Blob = () => {
    useEffect(() => {
        const myBlob = document.getElementById("blob");

        if(myBlob) {
            document.body.onpointermove = event => {
                const {clientX, clientY} = event;
        
                myBlob.animate({
                    left: `${clientX - 150}px`,
                    top: `${clientY - 100}px`
                }, {duration: 3000, fill: "forwards"});
            }
        }
    }, [])
    
    return (
        {/* 添加relative定位作为内部absolute元素的上下文 */}
        <div style={{position: 'relative'}}>
            <div id="blob" className="blob"></div>
            <div id="blur" className="blur"></div>
        </div>
    );
}

export default Blob;

页面代码（无需修改）

import Blob from "../atoms/trinkets/Blob";
const Home = () => {
    return (
        <div className="return-container">
            <Blob/>
            <div className="block"></div>
        </div>
    )
}

export default Home;

修改后的CSS代码

.blob {
    background: linear-gradient(to right, aquamarine, mediumpurple);
    height: 200px;
    width: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    animation: rotate360 20s infinite;
    /* 让Blob在容器内居中 */
    transform: translate(-50%, -50%);
}

.blur {
    /* 和Blob尺寸保持一致 */
    height: 200px;
    width: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    z-index: 2;
    backdrop-filter: blur(75px);
    /* 和Blob一起居中 */
    transform: translate(-50%, -50%);
}

@keyframes rotate360 {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.block {
    height: 500px;
    width: 500px;
    background-color: pink;
    z-index: 5;
    /* 添加relative让z-index生效 */
    position: relative;
}

内容的提问来源于stack exchange，提问作者AlpacaRG