关于css覆盖问题

Question

            <div class="article">
                <div id="pictures">
                    <div id="bg" style="background-image:url(xxx.jpg)"></div>
                  <div id="div-float">浮动div</div>
                </div>  
             </div>  

#pictures {
    width:100%;
    height:385px;

}
#bg {
    width:100%;
    background-position:50%;
    background-size:cover;
    height: 385px;
}
#div-float {
    width:50%;
    height:50%;
    float:left;
}

我想做的一个效果就是浮动的div能覆盖在图片div上，便于做模糊背景效果，现在问题是无论用什么办法，都无法让div-float覆盖在bg这个div上，float或是position都用过了，总是默认就被挤在下面，有什么办法解决吗？

Answer 1

#pictures{
    width: 100%;
    height: 385px;
    position: relative;
}

#div-float {
    width: 50%;
    height: 50%;
    /* float: left; */
    position: absolute;
    top: 0;
    left: 0;
}

Answer 2

模糊背景可以用css3的blur试试，俗称毛玻璃特效