0

相対的に配置された (高さが異なる) コンテナーがいくつかあり、それらを互いの下に表示したいと考えています。何が起こっているかというと、それらは互いの上に表示されています (フィドルを参照)。

position:relative子要素がposition:absoluteコンテナーに対して相対的に表示されるようにするため、コンテナーで使用しています。たとえば、高さを固定する簡単な修正があると思いますが、それはあまり柔軟ではありません。コンテナー (またはその子) の高さが異なります。

望ましい結果 - フィドル

実際の結果 - フィドル

コード：

<style type="text/css">
.outside
{
    position:relative;
    border:1px solid red;
}

.inside
{
    position:absolute;
    top:0;
    left:0;
}
</style>

<div class="outside">
    <div class="inside"><p>absolute 1</p></div>
</div>
<div class="outside">
    <div class="inside"><p>absolute 2</p></div>
</div>
<div class="outside">
    <div class="inside"><p>absolute 3</p></div>
</div>
4

2 に答える 2

1

相対要素内に絶対要素を配置する場合、この相対要素は絶対要素の幅や高さを考慮しないため、-DEMO-を追加するだけです。height:30px;

高さを固定したくない場合は、少なくとも。を使用してmin-heightください。-デモ-

于 2013-02-16T17:34:52.847 に答える
0

あなたが抱えている問題は、 div が絶対outsideに配置されているため、コンテナーにディメンションがないことです。inside

これらは可変高さのコンテナだとおっしゃっているので、これを修正する方法がわかりません。

「望ましい結果」フィドルの何が問題になっていますか? ボックスのレンダリング方法のデフォルトの動作を再現しようとしているようです。

于 2013-02-16T17:37:36.450 に答える