隱藏的css溢出不符合z-index的規則

Question

我對div職位有一個問題。

我已經創建了這個DEMO 。 如果單擊演示，您將看到3張圖片。 當您將鼠標懸停在圖片上方時，氣泡div將會打開。 但這並沒有顯示我在外面。

.bubble 
{
    position: absolute;
    width: 345px;
    height: auto;
    padding: 3px;
    background: #FFFFFF;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    border: #d8dbdf solid 1px;
    -webkit-box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
    -moz-box-shadow:    -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
    box-shadow:         -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
    display:none;
    margin-left:-345px;
}

.bubble:after 
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent #fff;
    display: block;
    width: 0;
    z-index: 1;
    right: -10px;
    top: 16px;
}

Answer 1

隱藏的溢出實際上是您的問題...您需要設置要在懸浮隱藏的元素之外顯示的項目。

問題是隱藏的溢出不符合Z索引規則。 框外所有隱藏的東西都被認為是文檔之外的東西。 您需要找到一種滿足您的要求的方法。

不幸的是，您要經歷很多div，因此我不是100％願意確切地告訴您我將如何做，但這是一個簡單的概念。 如果您將某個元素設置為在框外不顯示任何內容，並為其提供ID，請在其中替換html，然后使用鼠標偏移量可以100％做到這一點。 然后，該元素將在溢出框外彎曲，您將能夠在其上方看到它。

Answer 2

問題是隱藏的溢出不符合Z索引規則。 框外所有隱藏的東西都被認為是文檔之外的東西。 您需要找到一種滿足您的要求的方法。

子元素不能顯示出父級overflow:hidden一面overflow:hidden

 $('#members-bio').bxSlider({ slideWidth: 300, minSlides: 2, maxSlides: 2, slideMargin: 10 }); $(document).ready(function() { $('figure').click(function() { var memberDetails = $(".member-details"), item = $(this), listLeft = (item.offset().left) + 60; memberDetails.offset({ left: listLeft }).addClass('active-member'); }); }); 

 figure { margin: 0; } .member { position: absolute; top: 50px; left: 50%; width: 150px; height: 250px; margin-left: -75px; background: red; z-index: 9999; } .member-details { background-color: #fff; border: 1px solid #333; width: 140px; position: absolute; top: 150px; opacity: 0; display: none; } .active-member { display: block; opacity: 1; } 

 <div id="members-div"> <ul id="members-bio"> <li class="slide"> <figure> <img src="http://placehold.it/350x150&text=product"> </figure> </li> <li class="slide"> <figure> <img src="http://placehold.it/350x150&text=product"> </figure> </li> <li class="slide"> <figure> <img src="http://placehold.it/350x150&text=product"> </figure> </li> <li class="slide"> <figure> <img src="http://placehold.it/350x150&text=product"> </figure> </li> <li class="slide"> <figure> <img src="http://placehold.it/350x150&text=product"> </figure> </li> <li class="slide"> <figure> <img src="http://placehold.it/350x150&text=product"> </figure> </li> <li class="slide"> <figure> <img src="http://placehold.it/350x150&text=product"> </figure> </li> <li class="slide"> <figure> <img src="http://placehold.it/350x150&text=product"> </figure> </li> <li class="slide"> <figure> <img src="http://placehold.it/350x150&text=product"> </figure> </li> <li class="slide"> <figure> <img src="http://placehold.it/350x150&text=product"> </figure> </li> </ul> <div class="member-details"> <p>Product name</p> <p>Product details</p> <p>buy now</p> </div> </div> 

Answer 3

如果我對您的理解正確，則必須將氣泡放置在帶有“溢出：隱藏”的塊之外，並放置在相對圖像上。 “ class =” sinevis“的代碼塊具有style =” overflow：hidden;“； 它只是切斷了您的泡沫。

Answer 4

將該懸停容器放在溢出的盒子外面。 在CSS中使用：first-child，：last-child您將知道鼠標懸停在哪個元素上，因此，U將能夠添加適當的框位置。