Question

我有两个div，我想把它们放在另一个上面，所以我可以在我正在创建的applet中创建一个tab系统。这两个div位于父div中，它使用自动高度，因为我不知道其他两个div的确切高度（两个子节点的高度相同）。当父级使用相对定位时，我可以使用绝对定位将两个div一个放在另一个上面，但是自动高度没有响应（很可能是因为绝对定位的子级）而是创建一个空div的边界线而不是包含内部元素的包装器。

在此处查看问题：http://jsfiddle.net/h5bjt69s/

<div id = "parent">
    <div id = "redDiv"></div>
    <div class = "clearfix"></div>
    <div id = "blueDiv"></div>
</div>

我尝试过对此解决方案的建模，但我相信自动高度可以解决问题。 Position absolute but relative to parent

如何用父div包装两个div并仍然保持两个孩子的重叠？

Answer 1

此：

两个孩子的身高相同

实际上解决了你的问题：

使用position: static定位一个div;它将确定父级的高度
使用position: absolute定位其他div（它将显示在顶部）

Updated Fiddle

Answer 2

以下是更改

#blueDiv {   
    background-color: blue;
    width: 100%;
    height: 50px;
    position: relative;/*changed*/
    top: 0px;
    left: 0px;
    z-index:2;/*added*/
    opacity:0.7;
}

DEMO

另一种风格

#blueDiv {   
    background-color: blue;
    width: 100%;
    height: 50px;
    /*position: relative;removed*/
    opacity:0.7;
}

#redDiv {
    background-color: red;
    width: 100%;
    height: 50px;
    visibility: visible;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;/*added*/
}

<强> Updated

当父使用自动高度时，如何重叠父div内的div？

2 个答案: