css - 如何更改div的层顺序

Question

我有 2 个具有以下类名的 div：“red”和“green”绿色 div 是隐藏的，但是当鼠标悬停在红色 div 上时，会出现绿色 div。但是，绿色 div 出现在红色 div 前面。我想颠倒顺序，以便在将鼠标悬停在红色 div 上时，绿色会出现在其下方，即我希望红色 div 与绿色 div 重叠（我不只是想要两个 div 之间的空格，我想要红色 div 超过绿色 div）。我实际上想在红色 div 中包含一个背景 PNG，以便当绿色 div 出现时它实际上位于 PNG 下方。

绿色 div 嵌套在红色 div 内，我的 CSS 如下：

.green{
    display: none;
}

.red:hover .green{
    display: block;
}

Answer 1

你可以改变图层的顺序z-index

如果您总是希望红色位于顶部而不是在其上放置一些文字，请像这样：

z-index:9999;

如果您想了解更多信息，请使用本教程：z-index

Answer 2

我看不出如何将鼠标悬停在红色 div 上，因为它嵌套在绿色 div 内并且那个是隐藏的，因此红色 div 也应该被隐藏。

但我改变了一些东西。我使用position,z-index并将绿色嵌套在红色 div 中。

HTML

<div class="red">
    <div class="green">
    </div>
</div>

CSS

.green {
    display: none;
    background: green;
    width: 310px;
    height: 310px;
    margin-left: -5px;
    position: relative;
    z-index: -1;
}
.red {
    background: red;
    width: 300px;
    height: 300px;
    margin: 5px;
}
.red:hover .green {
    display: block;
}

我将绿色 div 的大小调大了一点，并添加了一些边距，这样就可以看到了。

这是一个现场示例http://jsfiddle.net/PaulvdDool/FpsuA/

Answer 3

HTML

<div class="wrapper">
    <div class="red"></div>
    <div class="green"></div>
</div>

CSS

.wrapper {
    position: relative;
     height: 50px;
     width: 50px;
}
.red {
    top:0;
    left: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color:#d42046;
    z-index:2;
}
.green {
    top: 0;
    left: 0;
    position: absolute;
    display: none;
    height: 60px;
    width: 60px;
    background: #1cc477;
    z-index:1;
}
.wrapper:hover .green {
    display: block;  
}

演示：

jsFiddle