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

我试图让弹出窗口出现在你悬停在几个框之一，它的工作正常，除了其他框出现在我的弹出窗口的顶部。我曾尝试将z-index值应用于.original-box和.popup-box，但没有运气。我不明白为什么z-index在这里没有效果？CSS框悬停弹出窗口出现在其他框后

这是我有：

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中呢？这就是我原来的，并没有工作。再次感谢:-)

来源

2013-05-30 splscs

。popup-box是唯一需要z-index的项目，最好只是在悬停时给它。没有必要事先应用它。原始框不需要指定任何z-index。 – Matt

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

如果您添加到您的CSS类，它将工作

来源

2013-05-30 14:54:26

为什么999？ brbcoding的1也可以。 999是矫枉过正。 –

改变了它，我总是使用999，所以我知道它的工作.. –

添加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添加到框来显示它在顶层。

来源

2013-05-30 14:55:21 brbcoding

Downvoter：照顾解释？至少在目前的Chrome，IE和FF中，链接的小提琴很明显。 – RichieHindle

您应该将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冲突。

来源

2013-05-30 15:04:56 Matt

将z-index：0添加到父容器时，它的子元素（即弹出框）也会继承z-index属性。有些浏览器可以解决这个问题，但大多数都会中断。请注意，默认情况下，页面上的每个元素的z-index都为0。 – Matt

然而元素是堆叠的，因此，如果绝对定位，兄弟姐妹总是会稍微高一些。希望这些建议可以帮助。注意*我总是使用10或20的增量，这样如果我以后需要调整1项z-index我不需要同时编辑几个 – Matt

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

回答

相关问题