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框懸停彈出窗口出現在其他框後

回答

相關問題