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我想将弹出窗口放在每个图像的顶部/中心..

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

将绝对div定位在相对容器内

1 个答案: