在相对容器中定位绝对div

Question

I have an image and want to show a rollover popup div on hover of that image. Below is my code;

<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>
...

Now I use position:relative for the wrapper and position: absolute for the popup. This is bcoz I want to position the popup at the top/center with respect to each image..

Now the issue is while the absolute position seems to be getting calculated with respect to the image, the popup is completely contained within the wrapper div and kind of crops some of the popup links. I want the complete popup to get displayed...How do I fix this?

Below is the CSS

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

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

Answer 1

Something like this?

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