html - 如何通过CSS在“相对”父级之外对齐未知高度的绝对DIV？

Question

考虑一个带有 html的简单示例

<div class="parent">
    <div class="child">
    </div>
</div> 

和 CSS

.parent{
    position:relative;
    background:red;
    width:200px;
    height:40px;
}
.child{
    position:absolute;
    top:40px;
    left:30px;
    width:70px;
    height:70px;
    background:blue;
}

将具有绝对位置的 DIV 放置在其父级下方（具有相对位置）。

在这个例子中，我将绝对的顶部等于父相对的高度。

当高度未知（父母和孩子）时，如何在父母下方对齐绝对DIV ？

Answer 1

不认为这对我自己有用，但它似乎：

html, body {
    height: 100%;
}
.parent{
    position:relative;
    background:red;
    width:200px;
    height:40px;
}
.child{
    position:absolute;
    top:100%;
    left:30px;
    width:70px;
    height:70px;
    background:blue;
}

Answer 2

检查这个..

HTML:
-------

<div class="parent">
</div> 
<div class="child">
</div>

CSS:
-----
.parent{
    position:relative;
    background:red;
    width:200px;
    height:40px;
}
.child{
    position:absolute;
    top:auto;
    left:30px;
    width:70px;
    height:70px;
    background:blue;
}

（例子）

Answer 3

您可以对底部使用负值，例如。bottom: -100px

编辑：这是更好的解决方案：http: //jsfiddle.net/mqy4z/3/ - 将孩子的位置设置为top:100%

Answer 4

尝试将两个 div 放在 HTML 文件中的彼此下方：

<div class="parent">
</div>

<div class="child">
</div>