在相对容器中定位绝对div

Question

我有一张图片，想要在该图片的悬停上显示一个鼠标悬停弹出式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>
...

现在，我将position：relative用于包装器，并将position：absolute用于弹出式窗口。 这是bcoz，我想将弹出窗口相对于每个图像定位在顶部/中央。

现在的问题是，相对于图像似乎正在计算绝对位置时，弹出窗口完全包含在wrapper div中，并且某些弹出链接属于某种作物。 我希望显示完整的弹出窗口...如何解决此问题？

下面是CSS

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

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

Answer 1

像这样吗

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