Question

我正在使用Jquery切换一个下拉区域，该区域将保存用户选择。我给下拉列表“＃share-collection-dropdown”div绝对位置。它是父元素 “＃share-collection”具有相对定位，所以一切都应该正常。然而，当您单击下拉列表并显示“＃share-collection-dropdown”div时，它会溢出。我认为绝对定位的元素不会影响页面的流动。我能做错什么？

JSFIDDLE：http://jsfiddle.net/DGXk9/

HTML：

<div id="share-collection">
    <div id="share-collection-left">
        <a> Choose Collection </a>
    </div>
    <div id="share-collection-right">
        <img src="assets/down_arrow_icon.png"/>
    </div>
    <div id="share-collection-dropdown">
    </div>
</div>

CSS：

#share-collection {
    position: relative;
    float: right;
    margin: 0px 5px 0px 0px;
    padding: 0px 10px 0px 10px;
    height: 28px;
    width: 120px;
    cursor: pointer;
}

#share-collection-dropdown {
    position: absolute;
    display: none;
    top: 29px;
    left: -1px;
    height: 200px;
    width: 140px;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-radius: 0px 0px 4px 4px;
    background-color: #fff;
    z-index: 100;
}

Answer 1

在您说#share-something的行中的元素overflow: auto;中查看代码。此属性定义了内容超出您定义的限制时的显示方式。将选项设为auto您的内容将被剪裁，并且每次遇到此问题时都会添加滚动条。

这些是属性溢出的其他可能性：

自动
无显示
无含量
可见
滚动
隐藏

要解决您的问题，您可以使用overflow: visible;来剪切内容。

您可以获取有关此媒体资源的更多信息here。

谢谢！

Answer 2

在#share-something上将overflow: auto;更改为overflow: visible;

使用绝对定位下拉菜单

2 个答案: