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

HTML ファイル内の両方の div を互いの下に配置してみてください。

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

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