将绝对 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作为弹出窗口。这是因为我想将弹出窗口定位在每个图像的顶部/中心。

现在的问题是，虽然绝对位置似乎是相对于图像计算的，但弹出窗口完全包含在包装器 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;
}