当父级使用自动高度时，如何在父级 div 内重叠 div？答案

【问题标题】：How can I overlap divs inside of a parent div when parent uses auto height?当父级使用自动高度时，如何在父级 div 内重叠 div？
【发布时间】：2014-08-22 23:48:12
【问题描述】：

我有两个 div，我想将一个放在另一个之上，这样我就可以在我正在制作的小程序中创建一个选项卡系统。这两个 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 包裹起来，仍然保持两个孩子的覆盖？

【问题讨论】：

请发布您的代码。不要将 Fiddle 链接作为代码发布。
你到底想得到什么？？
你在尝试这个DEMO
@Benjamin z-index 是你唯一改变的东西吗？
@user3735633 这是你在尝试什么

标签： html css z-index positioning

【解决方案1】：

这个：

两个孩子的身高相同

实际上解决了你的问题：

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

Updated Fiddle

【讨论】：

【解决方案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

【讨论】：