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以在顶层显示它。

Answer 2

.popup-box{
   z-index:1;
}

如果你把它添加到你的CSS中的类，它将起作用

Answer 3

您应该仅将z-index属性置于悬停事件中。见下文;

.original-box:hover .popup-box {
  top:25px;
  opacity:1;
  filter:Alpha(opacity=100);
  z-index: 20;
}

查看您的revised JSFiddle here。希望这可以帮助你我的朋友。

请注意，z-index为20，您不希望在其他项目上使用z-index与其他插件/代码冲突。

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

3 个答案: