IE z-index错误没有正确显示div

Question

我有两个div一个在另一个里面，我想重叠一个div与其他，也使用css idnex，但即不让我这样做，是否有一些一种解决方法？

请在IE浏览器中查看此代码，因为它适用于其他浏览器。

这里的jsfiddle：http://jsfiddle.net/xkDCX/1/

，代码：

<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

这里的事情是，过滤器，你都只能在IE中加入不工作，所以当你看到在其他浏览器的风格他们根本不认识它。

更新：

这会为你解决吗？

<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>