2013-07-27 9 views
5

相対位置+絶対配置要素を持つ要素の後に何かを置くと、重なります。高さを指定するとこれは行いませんが、比較的配置された要素の内容が動的なので、これをしたくありません。高さを指定せずに重なりを取り除く方法は?要素を重ならずに相対配置要素の下に配置する方法はありますか?

簡単な例では:

<div style="position:relative"> 
    <div style="position:absolute;"> 
     blabla 
    </div> 
</div> 
I WANT THIS BELOW 
+0

私は 'float'を使用しますが、 'position'を使用する必要がある場合はjavascriptが必要です。あなたがjavascriptの解決策を望むなら、コメントしてください。 – twinlakes

+1

本当の例を教えてください。たぶん、別の方法があります。なぜ内部要素は絶対的である必要がありますか? – nirazul

+0

内部divを絶対的に配置したいが、他の要素がドキュメントフロー内での位置付けを尊重する理由はありますか? – thgaskell

答えて

0

あなたは非常に最初の要素にposition:relativeを適用したので、どちらかあなたはheightを指定するか、またはそれにpadding-bottomを提供してきました。

例えば、提供されたコードではの20pxを適用しました。

heightの使用

<div style="position: relative; height: 20px;"> 
    <div style="position:absolute;">blabla</div> 
</div> 
<div>I WANT THIS BELOW</div> 
+0

私が述べたように、私は高さを指定したくありません。 – gadelat

2

absolute位置決め構造の流れのうちの要素をとるシナリオのこの種のpadding-bottomを使用するよりも優れています。このような理由から、その存在は無視されています。それは目的です。そうしないとあなたは要素が必要な場合は、左に配置または右フローティング要素はその後、レイアウトが

<div style="clear:both;"></div>

DEMO http://jsfiddle.net/kevinPHPkevin/uHuSF/

保存されているので、あなたはdiv要素の下をクリアすることを確認するとfloat

を使用あなたの目標を達成するには別のアプローチが必要です。

+0

私は絶対的な位置付けは、それが相対的に位置の親だけの流れから要素を取ることになっていると思った、これは欠陥のある概念です。 – gadelat

関連する問題