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和child div元素，使子div位于select元素的顶部并完全覆盖它。后来我想根据事件隐藏子div并使select元素可见。子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

第一个问题是给#parent div一个大小，从而从其样式中删除display: inline。

接下来，您可以切换从display: none到display: block和v.v.的两个元素。但是要减少一半，你可以使用绝对定位，它将元素从默认标记布局中取出，如this example所示。

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;
}

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

3 个答案: