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>