在相對容器中定位絕對div

我有一個圖像，並希望顯示懸停在該圖像上的滾動彈出div。以下是我的代碼;在相對容器中定位絕對div

<div class="wrapper"> 
    <ul class="popup"> 
     <li><a href="#"Link 1</a></li> 
        <li><a href="#"Link 2</a></li> 
     <li><a href="#"Link 3</a></li> 
        <li><a href="#"Link 4</a></li> 
    </ul> 
    <img src="iOpenPopupOnHover.gif"/
</div> 
<div class="wrapper"> 
    <ul class="popup"> 
     <li><a href="#"Link 1</a></li> 
        <li><a href="#"Link 2</a></li> 
     <li><a href="#"Link 3</a></li> 
        <li><a href="#"Link 4</a></li> 
    </ul> 
    <img src="iOpenPopupOnHover.gif"/
</div> 
...

現在我使用位置：相對的包裝和位置：絕對的彈出。這是bcoz我想在每個圖像的頂部/中心位置彈出窗口..

現在的問題是，雖然絕對位置似乎計算相對於圖像，彈出窗口完全包含在包裝div和某些作物的某些彈出鏈接。我想要顯示完整的彈出窗口...我該如何解決這個問題？

下面是CSS

.wrapper { 
    float: left; 
    position: relative; 
} 

.popup { 
    display: none; 
    width: 80px; 
    background-color: red; 
    position: absolute; 
    bottom: 105px; 
    left: 10px; 
}

來源

2011-10-19 testndtv

像這樣的事情？

.wrapper { 
    float: left; 
    position: relative; 
    overflow: visible; 
}

來源

2011-10-19 11:11:20

嗯......是......我真的很傻......這樣解決了這個問題......但不幸的是我面臨另一個問題......我不能使用overflow：visible，因爲我使用overflow：hidden爲了佈局目的（清除浮動等）。所以我需要一些其他方式來定位基於鼠標點擊位置左右的彈出窗口。 – testndtv

另一個問題是什麼？ –

我想在點擊某個圖像時顯示一個翻轉彈出窗口。儘管我能夠顯示彈出窗口，它會收集溢出的bcoz：hidden..I使用overflow：隱藏用於佈局目的，因此不能更改爲溢出：可見（清除浮動等）。所以我需要一些其他方式來定位基於鼠標點擊位置的彈出窗口或其他。 – testndtv

在相對容器中定位絕對div

回答

相關問題