行爲的溢出汽車和可見

混合我有HTML結構行爲的溢出汽車和可見

<div class="PapaDiv"> 
    <input type="checkbox"/> 
    <label></label> 
    <div class="ChildDiv"> 
    <input type="radio"/><label></label> 
    <input type="radio"/><label></label> 
    <input type="radio"/><label></label> 
    </div> 
    <br/> 
</div>

這種動物被構建動態服務器側根據數據。這有點像嵌套菜單。當用戶使用標籤將複選框懸停時，ChildDiv會顯示在旁邊。 PapaDiv具有overflow-y：定義了自動和最大高度。所以，如果有很多複選框，PapaDiv會得到一個垂直滾動條。這是想要的行爲。現在，如果將鼠標懸停在底部的複選框上，其ChildDiv也會顯示在PapaDiv中（overflow-y：auto）。企業希望將其顯示在PapaDiv之上，爲此我必須設置overflow-y：visible。這是這裏的困境。我需要兩種行爲的組合。我需要ChildDiv在PapaDiv外部顯示，並且同時其他的孩子在顯示滾動條的時候會顯示內容，如果有很多的話。任何解決方案或我擰？：）謝謝。

編輯：我不認爲這將有助於多，但肯定的是，這裏是CSS：

.ChildDiv{ 
    background-color: #EDF1F9; 
    border: 1px solid #557AB5; 
    display: none; 
    max-height: 200px; 
    overflow-y: auto; 
    padding: 10px; 
    position: absolute; 
} 

.PapaDiv{ 
    background-color: #FFFFFF; 
    border: 1px solid #557AB5; 
    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3); 
    left: 0; 
    max-height: 300px; 
    overflow-y: auto; 
    padding: 0.5em; 
    position: absolute; 
    top: 0; 
    width: 98%; 
    z-index: 501; 
} 

PapaDiv's parent div { 
    position: relative; 
    width: 100%; 
}

編輯：什麼原因顯示出來，是因爲有顯示：無在CSS。涉及JavaScript。對於這些元素，在複選框或其標籤上的鼠標懸停時，ChildDiv會顯示（jQuery $（'。ChildDiv'）。show（））。從ChildDiv或PapaDiv中輸出鼠標：$（'。ChildDiv'）。hide（）。此外，還有一個簡單的計算，可以爲ChildDiv設置「top」和「left」屬性，使其顯示在其複選框旁邊。 ChildDiv已經被定義爲position：absolute;

來源

2012-09-10 Dimskiy

這將是真正的幫助，如果您將添加一些CSS：P – Ddorda

@Dimskiy，如果這個代碼被渲染爲是（對於例如jsfiddle：http://jsfiddle.net/Pkbc2/），沒有任何顯示。我懷疑你的代碼使用了一點Javascript來顯示任何東西 - 除非你向我們展示代碼，否則很難想象你的問題可能需要解決。可能是一個JS的東西，可能是一個CSS的東西，但我們需要知道！ – Barney

Dimskiy之前我也有同樣的問題。當鼠標懸停在圖像上時，我試圖創建一個放大鏡。我發現父div，在這種情況下#PapaDiv必須定位相對而子div，在這種情況下，#ChildDiv絕對定位。

我看到#PapaDiv的父項在哪裏相對位置，但如果我記得，我必須相對定位子元素的直接父項。

試試這個：

#PapaDiv { 
    position: relative; 
} 
#ChildDiv { 
    position: absolute; 
}

當然你也可以添加所有其他附加的CSS在那裏爲好。

下面的鏈接是我曾經幫助我的帖子：
How to overlay one div over another div

來源

2012-09-18 16:36:30 War10ck

行爲的溢出汽車和可見

回答

相關問題