[解決済み] 位置：絶対位置と親の高さ？

質問

私はいくつかのコンテナを持っており、それらの子供は絶対的/相対的に配置されているだけです。コンテナの高さを設定し、それらの子供がそれらの内側になるようにするにはどうすればよいですか？

以下はコードです。

HTML

<section id="foo">
    <header>Foo</header>
    <article>
        <div class="one"></div>
        <div class="two"></div>
    </article>
</section>    

<div style="clear:both">Clear won't do.</div>
<!-- I want to have a gap between sections here -->

<section id="bar">
    <header>bar</header>
    <article>
        <div class="one"></div><div></div>
        <div class="two"></div>
    </article>
</section>  

CSS

article {
    position: relative;
}

.one {
    position: absolute;
    top: 10px;
    left: 10px;
    background: red;
    width: 30px;
    height: 30px;
}

.two {
    position: absolute;
    top: 10px;
    right: 10px;
    background: blue;
    width: 30px;
    height: 30px;
}

以下はjsfiddleです。四角の後ろではなく、四角と四角の間にテキストを表示させたいのです。

http://jsfiddle.net/Ht9Qy/

何か簡単な修正方法はありますか？

私はこれらの子供の高さを知らないし、私はコンテナのためにheight: xxxを設定することができないことに注意してください。

どのように解決するのですか？

もし、あなたがやろうとしていることを私が正しく理解しているなら、子要素の絶対位置を維持しながら、CSSでこれが可能だとは思えません。

絶対位置指定された要素は、ドキュメントの流れから完全に取り除かれるため、その寸法は親の寸法を変更することはできません。

もしあなたが 本当に として子プロセスを維持したまま、この効果を達成しなければなりませんでした。 position: absolute として維持しながらこの効果を達成する必要がある場合、レンダリング後に絶対位置決めされた子供の高さを見つけ、親の高さを設定するためにそれを使用することによって、JavaScript でそれを行うことができました。

別の方法として、単に float: left / float:right と余白がある場合、子プロセスをドキュメントフロー内に保ちながら同じ位置決め効果を得るには、次に overflow: hidden を使用して、その高さをその子の高さまで拡張することができます（または他のクリアフィックス技術）。

article {
    position: relative;
    overflow: hidden;
}

.one {
    position: relative;
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    background: red;
    width: 30px;
    height: 30px;
}

.two {
    position: relative;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    background: blue;
    width: 30px;
    height: 30px;
}