CSS 框悬停弹出窗口出现在其他框后面

Question

当您将鼠标悬停在几个框之一上时，我试图让弹出窗口出现，并且它工作正常，除了其他框出现在我的弹出窗口顶部。我试过将 z-index 值应用于 .original-box 和 .popup-box 但没有成功。我不明白为什么 z-index 在这里没有作用？

这是我所拥有的:

http://jsfiddle.net/CK4tA/

<div class="original-box">
    Hover over me
    <div class="popup-box popup-box-centre">
        Some popup content
    </div>
</div>

提前感谢您的指导!

编辑:太棒了 - 谢谢大家!出于我的好奇，为什么将 z-index:0 添加到 .original-box 会破坏它？这就是我最初的想法，但没有用。再次感谢:-)

Answer 1

将z-index添加到.popup-box。

    .popup-box {
    position:absolute;
    top:0px;
    width:230px;
    height:230px;
    padding:10px;
    background-color:#EC006C;
    color:#FFF;
    -moz-transition:all 0.4s;
    -webkit-transition:all 0.4s;
    -o-transition:all 0.4s;
    transition:all 0.4s;
    opacity:0;
    filter:Alpha(opacity=0);
    z-index: 1;
}

DEMO

为框添加一个 z-index 以在顶层显示它。