如何更改div的层顺序答案

【问题标题】：How to change the layer order of divs如何更改div的层顺序
【发布时间】：2013-06-04 08:48:54
【问题描述】：

我有 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;
}

【问题讨论】：

还有位置属性。
developer.mozilla.org/en-US/docs/Web/Guide/CSS/…
如果您向我们展示 HTML，而不是向我们描述它，这（可能）会更容易回答。代码减少了自然语言中固有的歧义，并带来无限更好/更可靠的答案。

标签： css html

【解决方案1】：

您可以使用z-index更改图层顺序

如果你总是希望红色在上面而不是在上面放一些文字，那就这样吧：

z-index:9999;

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

【讨论】：

为什么我得到了-1？你能解释一下为什么吗？
嗯，确实如此。但是反对票已经消失了。也许是他/她的一些错误点击:)
@Ryan de Vries 谢谢。即使使用 9999 和 1 的值，我似乎仍然无法让它工作。我将从一个空白文档重新开始，看看它是否有效。

【解决方案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/

【讨论】：

【解决方案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

【讨论】：