html - 下拉菜单使用绝对定位

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 .

谢谢!