HTML5不提供滤镜布局，filter是CSS属性；需作用于块级容器并配合定位与堆叠上下文，避免性能问题及层级冲突。
HTML5 本身不提供“滤镜布局”这种概念——filter 是 CSS 属性，不是 HTML 布局机制。想用滤镜做出视觉分层或响应式效果，关键在如何把 filter 和 HTML 结构、CSS 定位/堆叠上下文配合好。
滤镜必须作用在块级容器上才能生效
很多人把 filter 直接加在 blur()、drop-shadow()）在某些浏览器中对替换元素（如图片）支持不稳定，且无法影响其父容器外的内容。
- 确保目标元素是
display: block或display: inline-block - 避免直接对
内嵌元素或设置filter，应包裹一层- 若需对整个区域（含子元素）加模糊，给父容器设
filter: blur(4px)，而不是只作用在背景图上滤镜与 z-index / stacking context 的冲突
加了
filter的元素会强制创建新的堆叠上下文（stacking context），这会让它内部的z-index只在本层生效，容易导致遮挡错乱——比如你给卡片加filter: drop-shadow(...)后，卡片里的弹出菜单被截断或压在下面。- 检查是否意外触发了新 stacking context：除了
filter，opacity 、transform、will-change都有同样效果 - 若需弹层浮在滤镜容器之上，把弹层移出该容器 DOM，用
position: fixed或 Portal 方式挂载到 - 不要依赖
z-index跨 stacking context 排序，层级关系已由创建顺序决定
性能敏感：filter 不要滥用在滚动区域
filter特别是blur()和contrast()在滚动时会频繁重绘，iOS Safari 和旧版 Chrome 上极易掉帧。立即学习“前端免费学习笔记（深入）”；
- 避免对
position: sticky或overflow: scroll容器设filter - 用
will-change: filter前先实测——它可能让 GPU 内存暴涨，反而更卡 - 替代方案：用 SVG 滤镜预渲染静态效果；或用两个图层（原图 + 模糊图）叠加，通过
opacity切换，比实时计算快得多
内容真正难的不是写对那行
filter，而是判断它该加在哪一层、会不会吃掉子元素的定位自由度、以及用户滑动时敢不敢让它动。 - 若需对整个区域（含子元素）加模糊，给父容器设
