html - z-index not working for blur effect -

let´s have structure

 <div class=a>      <div class=b>          <dialog/>      </div>  </div> 

now want apply blur effect on once open dialog can use opacity see behind blur , achieve mac opacity window effect. so, i´ve done far this

 .b {     opacity: 0.9;     padding: 20px;     position: relative;     z-index: 5; }   .a{     -webkit-filter: blur(7px);     -moz-filter: blur(15px);     -o-filter: blur(15px);     -ms-filter: blur(15px);     filter: blur(15px);     z-index: 1; } 

as can see i´m giving more z-index b on , i´m putting opacity see blur effect of behind.

but no results far. blur z-index not working properly.

any idea i´m doing wrong?

i want achieve put on blur , leave dialog clear put opacity. effect i´m looking for

https://www.google.es/search?q=css+yosemite+blur&espv=2&biw=1879&bih=962&tbm=isch&imgil=14czk2coq2jrcm%253a%253bqjghokvsp1acmm%253bhttp%25253a%25252f%25252fstackoverflow.com%25252fquestions%25252f25090012%25252fos-x-yosemite-menu-background-blur-in-css&source=iu&pf=m&fir=14czk2coq2jrcm%253a%252cqjghokvsp1acmm%252c_&usg=__kfibv3ck2zbnqj6gleonrget1cg%3d&ved=0cfqqyjc&ei=j2bmvynckcvwuq_jgoai#imgrc=14czk2coq2jrcm%253a%3bqjghokvsp1acmm%3bhttp%253a%252f%252fi.stack.imgur.com%252f4sbmr.png%3bhttp%253a%252f%252fstackoverflow.com%252fquestions%252f25090012%252fos-x-yosemite-menu-background-blur-in-css%3b788%3b468

regards.

using @manoz jsfiddle achieved want.

but need change structure. previous answer told so. difference added position absolute .a sits underneath .b

.b {      opacity: 0.9;      padding: 20px;      position: relative;      z-index: 5;      background:white;      height:250px;      width:250px;  }  .a {      -webkit-filter: blur(1px);      -moz-filter: blur(1px);      -o-filter: blur(1px);      -ms-filter: blur(1px);      filter: blur(1px);      background:blue;      z-index: 1;      height:250px;      width:250px;      position: absolute;  }

<div>      <div class=a>                </div>      <div  class=b>           <h2>sample</h2>      </div>  </div>

you can add opacity text if desire. adjust accordingly.

edit 1:

so want keep same structure.. here is:

.b {      opacity: 0.9;      padding: 20px;      z-index: 5;      background:white;      height:250px;      width:250px;      position: relative;  }    .a:before {      content: '';      display: block;      -webkit-filter: blur(1px);      -moz-filter: blur(1px);      -o-filter: blur(1px);      -ms-filter: blur(1px);      filter: blur(1px);      background:blue;      z-index: 1;      height:250px;      width:250px;      position: absolute;      top:0 ;  }

<div class="a">       <div class="b">           <h2>sample</h2>       </div>   </div>

you can adjust size of :before accordingly ..