Q:

CSS blur ignoring z-index

Fella's!
I'm trying to create the same effect as the iphone search bar on the homescreen. 
When you click on the body of my page, a bar will appear and the rest of the page will become blurry. Now there is a problem, The white bar on the top should have a hard border but on the bottom the blur of the .page gets over it. I tried to change the z-indexes but it seems that there is not the solution. 
Can someone help me with this?

A:

Your blur effect is bleeding into the header div. Give your .page section overflow: hidden; to avoid this.
jsfiddle

