Question

我有一个与此http://jsfiddle.net/hsmishka/54t32vfc/2/类似的自定义下拉列表。在调整窗口大小时，如何在屏幕上保留绝对定位的下拉菜单？像是对的东西：0;但只有当它不适合窗户时。

<div class="outer">
    <div class="dropdown">
        <ul>
            <li>item 1</li>
            <li>item 2</li>
        </ul>
    </div>
<div>
.outer {
    position: relative;
    margin: 100px;
    width: 400px;
    border: 1px solid green;
}

.dropdown {
    position: absolute;
    background: #EEE;
}

li {
    background: grey;
    height: 20px;
    width: 200px;
}

Answer 1

我认为外部标签也必须是绝对的，因为它正在包装下拉标签。试试吧？

Answer 2

我不确定你的最终目标是什么。但你可能需要的是一些媒体查询。真的，我建议检查Bootstrap，因为它是为响应式设计而构建的。

但要获得您想要的工作，您需要确保下拉父级设置为：

position: relative;

然后您的下拉菜单将被限制为父母。否则它将是身体或最近的相对元素。

Answer 3

JSFiddle

Position:fixed; right:0;

这很有用。

调整大小时如何在屏幕上保留绝对定位元素

3 个答案: