css - 如何在 div 中添加 2 个重叠元素？

Question

<div id="parent" style="height:250px;width:250px;display:inline">
   <div id="child" style="height:100%;width:100%;z-index:10001"></div>
   <select style="height:100%;width:100%;z-index:10000"><option/></select>
</div>

我的要求是在父 div 中包含 select 和子 div 元素，使子 div 位于 select 元素的顶部并完全覆盖它。稍后我想根据事件隐藏子 div 并使选择元素可见。子 div 和 select 元素都应该各自占据父 div 的整个大小。我怎样才能做到这一点？

Answer 1

http://jsfiddle.net/dyBjZ/2

#parent {
    position: relative;
    overflow: auto;
}
.child {
    position: absolute;
    height:100%;
    width:100%;
}

<div id="parent">
    <div class="child">
        <select>
            <option>One</option>
            <option>Two</option>
        </select>
    </div>
    <div class="child" id="child">Click me</div>
</div>

Answer 2

从上面的评论中得到输入，我能够解决我的问题。这就是我所做的。将其发布在这里以防其他人登陆此页面搜索。

<div id="parent" style="height:250px;width:250px">
    <div id="child" style="display:block;height:100%;width:100%"></div>
    <div id="selectParent" style="display:none;height:100%;width:100%">
      <select><option/></select>
    <div>
</div>

基于 javascript 事件，我将子 div 的显示从块切换为无。并在 selectParent 中将显示从无切换为阻止。

Answer 3

第一个问题是给#parentdiv 一个大小，从而display: inline从它的样式中删除。

接下来，您可以将两个元素从display: nonetodisplay: block和 vv 切换，但要将其减少一半，您可以使用绝对定位，将元素从默认标记布局中取出，如本例所示。

HTML：

<div id="parent">
   <div id="child"></div>
   <select></select>
</div>

CSS：

#parent {
    height: 250px;
    width: 250px;
    position: relative;
}
#child {
    position: absolute;
    background: #aaa;
    height: 100%;
    width: 100%;
}
select {
    height: 100%;
    width: 100%;
}
#child.hidden {
    display: none;
}