IE z-index bug doesn't properly display divs

Question

I have two divs one inside another, i would like to overlap one div with other and also use css idnex, but ie doesn't let me do this, is there some kind of workaround?

Please view this code in IE since it works in other browsers.

Here is jsfiddle: http://jsfiddle.net/xkDCX/1/

And the code:

<div class="container">
    <div class="button"></div>
<div>


body{
    margin:50px;
}

.container{
    position:relative;
    width:410px;
    height: 300px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#daf5fd', endColorstr='#0dbcf5');
    z-index:22;
}

.button{
    width:20px;
    height:20px;
    border:2px solid black;
    position:absolute;
    right:-10px;
    top:-10px;
    background:black;
    z-index:11;
}

Answer 1

The thing here is that the filter you added doesnt work at all only in IE so when you see the style in other browsers they dont recognize it at all.

UPDATE:

Would this worked out for you?

<div class="container">
    <div class="button">
      <div class="but"></div>
    </div>
    <div class="background"></div>
<div>

<style>
body{
    margin:50px;
}

.container{
    position:fixed;
    width:410px;
    height:300px;    
    margin:0;
    padding:0;   
}

.container .background{
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    height:100%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#daf5fd', endColorstr='#0dbcf5');
    z-index: 50;
}

.container .button{
    position:absolute;
    width:410px;   
    margin-left:auto;
    margin-right: auto; 
    z-index: 100;  
} 

.container .but{
    position:absolute;
    width:20px;
    height:20px;
    background:black;
    right:-10px;
    top:-10px;
    border:2px solid black;
} 
</style>