4

我正在尝试制作一个顶部有转换（CSS）的div；这是标记，我只需要绿色 div 显示在蓝色 div 之上。基本上蓝色是一个蒙版层，绿色是一个显示在它上面的对话框。

我尝试设置z-index，它不起作用。蓝色总是出现在绿色之上。

此外，如果我将蓝色 div 更改为绿色 div 的兄弟，那么它可以工作，但我想保持标记相同，即蓝色 div 是绿色 div 的兄弟父级

任何指针？

这是js小提琴链接... http://jsfiddle.net/YRTxt/9/

CSS

#wrapper{
    width:100%;
}
#red, #green{
    height:200px;
    width:400px;
}
#red{
    background-color:red;
    position:absolute;
    -webkit-transform: scale(1);
}
#pink{
    background-color:pink;
    height:250px;
    width:150px;
    top: 50px;
    position:absolute;
    -webkit-transform: translate3d(0%,0px,0px);
    -webkit-perspective: 1000;
}
#green{
    background-color:green;
    position:absolute;
    -webkit-transform: translate3d(0,0,0);
    top:100px;
    right: 0px;
    left: 0px;
    z-index: 1111;
}
#blue{
    background-color: blue;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    position: absolute;
    top:0px;
    right: 0px;
    z-index: 100;
}

HTML

<div id="wrapper">
    <div id="red">
        <div id="pink">
            <div id = "green"/>
        </div>
    </div>   
</div>
<div id="blue">
</div>
4

1 回答 1

1

要使 z-index 起作用，您必须对两个元素都有一个 z-index。我更新了 http://jsfiddle.net/rTkyR/，我只将 z-index 添加到 CSS 两个蓝色和绿色 div 中。

HTML

<div id="wrapper">
    <div id="red">
        <div id="pink">
            <div id = "green"/>
        </div>
    </div>   
</div>
<div id="blue">
</div>

CSS

#wrapper{
    position:relative;
    width:100%;
}
#red, #green{
    height:200px;
    width:400px;
}
#red{
    background-color:red;
    position:relative;
}
#pink{
    background-color:pink;
    height:250px;
    width:150px;
    top:50px;
    right:20px;
    position:absolute;
}
#green{
    background-color:green;
    position:absolute;
    -webkit-transform: translate3d(0,0,0);
    top:0px;
    right: 0px;
    left: 0px;
    z-index: 1;
}
#blue{
    background-color: blue;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    position: absolute;
    top:0px;
    right: 0px;  
    z-index: 0;
}
于 2013-08-01T01:13:01.703 回答