忽略z索引的CSS模糊

伙计们！ 我试图在主屏幕上创建与iphone搜索栏相同的效果

当你点击我的页面主体时，会出现一个条，页面的其余部分会变得模糊。现在出现了一个问题，顶部的白色条应该有一个硬边框，但在底部。页面的模糊部分覆盖了它。我试图更改z索引，但似乎没有解决方案

---

有人能帮我一下吗？

你的模糊效果正在流入标题区。给出你的

.page

部分

溢出：隐藏以避免这种情况

只需在
页面中添加简单的行即可。
避免外部模糊效果：

overflow:hidden;

谢谢！我都没想过！你知道为什么这个解决方案不适用于FF吗？谢谢，节省了我很多时间！你知道为什么这个解决方案不适用于FF吗？你可能需要在另一个div中用模糊来包装元素，以隐藏溢出。这里有一个JSFIDLE:。