css - IE z-index 错误无法正确显示 div

Question

我有两个 div 一个在另一个里面，我想将一个 div 与另一个重叠并使用 css idnex，但 ie 不允许我这样做，有什么解决方法吗？

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