如何實現z-index和溢出

我試圖顯示當用戶將光標懸停在div上時出現的「彈出」窗口。一切工作正常，除了當我添加一個滾動條到我的div。 CSS代碼顯示滾動條是這樣的：如何實現z-index和溢出

.scroll-menu { 
    max-height: 100px; 
    overflow-x: hidden; 
    overflow-y: scroll; 
}

這裏是一個圖像包括.scroll-menu上課前， no using scrollbar

這裏包括CSS類後的圖像。

using scrollbar

我發現這篇文章在這裏筆者說，在我的情況爲什麼的z-index： http://www.satya-weblog.com/2012/01/css-z-index-not-working.html

現在，我的問題是：我怎樣才能解決這個問題呢？有沒有辦法得到工作z索引和溢出？

來源

2013-12-09 Rolando

如果可能提供我們小提琴鏈接 –

我會說要刪除'overflow-x：hidden;' – Brewal

這不是一個z-index問題，而是一個溢出問題。因爲您將溢出設置爲hidden任何可視化地伸出其容器的元素都將部分隱藏 - 就像在屏幕截圖中一樣。你需要做的就是將你的彈出元素的容器外，它被設置爲overflow-x:hidden

的一個，所以如果你的HTML目前看起來是這樣的：

<div class="scroll-menu"> 
    .... content .... 
    <div class="popup"></div> 
</div>

你想將其更改爲：

<div class="scroll-menu"> 
    .... content .... 
</div> 
<div class="popup"></div>

來源

2013-12-09 16:41:48

是的，這是一個很好的解決方法。壞消息（對我來說）是我使用durandarl/widget來顯示這個彈出窗口（我列表中的每個元素都有一個與之相關的「彈出」窗口小部件。我認爲解決我的問題的唯一方法是添加一些對我的列表進行分頁並將它忘掉這個「滾動條」。你的回答非常有用，因爲現在我知道我沒有溢出和z-index的機會。 – Rolando

-1

overflow-x: hidden;

我相信這條線可能會導致您的問題，因爲你告訴包含div截斷任何超出它的邊界。

來源

2013-12-09 16:41:56 Donovan

如何實現z-index和溢出

回答

相關問題