Question

我有简单的对话框，完全位于屏幕中央。里面有一个简单的下拉列表，相对定位的父级（我希望下拉列表跟随他的父级位置而没有js）。但是当我向其父元素添加相对位置时，下拉列表不会与任何其他元素重叠。这是我习惯的正常行为。

但我仍然想找到这种行为的纯css解决方案。

HTML和CSS

＆＃13;

$(document).ready(function() {
    $("#dropDown_open").on("click", function() {
        $(".abs").toggle();
    });
});

＆＃13;

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

#container {
    position: relative;
    width: 100%;
    height: 100%;
    background: yellow;
}

#container .dialog {
    position: absolute;
    left: calc(50% - 150px);
    top: calc(50% - 150px);
    width: 300px;
    height: 300px;
    background: white;
}

#container .dialog .preScroll {
    position: relative;
    width: 100%;
    height: 100%;
}

#container .dialog .header,
#container .dialog .footer {
    height: 25px;
}

#container .dialog .scroller {
    height: calc(100% - 50px);
    width: 100%;
    background: blue;
    overflow: auto;
}

#container .dialog .scroller #dropDown_open {
    position: relative;
}

#container .dialog .scroller .abs {
    position: absolute;
    display: none;
    top: 120%;
    width: 150px;
    height: 200px;
    background: red;
    z-index: 9999;
}

ul {
    list-style: none;
}

ul li {
    font-size: 16px;
}

ul li:last-child {
    background: #FFF;
    padding: 5px;
    border: 1px solid black;
    border-radius: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div class="dialog">
        <div class="preScroll">
            <div class="header">header</div>
            <div class="scroller">
                <div>
                    <ul>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li id="dropDown_open"><span>Click me!</span><div class="abs"></div></li>
                    </ul>
                </div>
            </div>
            <div class="footer">footer</div>
        </div>
    </div>
</div>

＆＃13;

所以很快：目标是下拉菜单会在需要时重叠对话框 - 当没有空间时，应该在对话框的顶部显示。

这是jsFiddle（更准确）：http://jsfiddle.net/8p0jj2jk/1/

Answer 1

使用：hover状态可能如此？

使用以下CSS选择器：

#container .dialog .scroller #dropDown_open > span:hover ~ div.abs {
    display:block;
}

FIDDLE HERE

Answer 2

如果我清楚地了解你，我不确定。尝试替换此

#container .dialog .scroller .abs { ...; top: 120%; ...; }

与

#container .dialog .scroller .abs { ...; bottom: 120%; ...; }

相对父级中的绝对元素 - 不与其他父级重叠

2 个答案: