1

ユーザーが操作できる複数のセクションを持つ単一ページの Web アプリを作成中です。現在、ページを個別のセクションに分割するアプリのメイン レイアウトを作成する必要があります。各セクションに追加される内部コンテンツを制御することはできません。

各セクションは、ユーザーが拡大し、他のセクションをビュー領域から押し出すことができる必要があります。このため、各セクションを正しく配置し、ビュー上の位置を簡単に変更できるようにするために、各セクションに絶対配置を使用することを考えています。

理想は、誰かが自分のページで開発しているかのように、各セクションの内部コンテンツを開発できることです。だから私の懸念は - 親 div を絶対に配置すると、追加される子要素にどのように影響するのですか?

4

3 に答える 3

2

プロパティposition: absolute|relative|...は、記述された要素がその親/祖先に対してどのように動作するかを示すためのものであり、その子がどのように動作するかを示すものではないと思います。

各セクションで絶対配置を使用すると、それらはすべて通常の流れから外れます。つまり、通常のフロー メカニズムを再作成する必要があります。通常の流れ、フロート、ポジショニングの比較のセクションを読むことをお勧めします。

于 2013-02-17T13:56:22.143 に答える
1

名前が示すものとは反対に、絶対配置要素は、幅または高さを指定しない限り、その中のコンテンツに合わせて拡大または縮小します。http://jsfiddle.net/M3CZg/

#abs1 {
position:absolute;
top:0;
}
#abs2 {
position:absolute;
top:50px;
width: 400px;
}

<div id="abs1"></div>
<div id="abs2"></div>

これら 2 つの div に任意のコンテンツを入力すると、それに応じて拡張されます。

ユーザーが操作したdivであなたが言っていることについては、最小幅と最小高さ、さらに最大幅と最大高さを使用して、拡張を範囲内に保つことができます。これには、コンテンツが最大プロパティよりも大きい場合に、overflow:hidden も必要です。http://jsfiddle.net/M3CZg/3/それをいじって、ウィンドウを動かして div がどのように変化するかを確認してください。

于 2013-02-17T14:05:18.080 に答える
0

これを投稿して、調査結果をフォローアップします。

主な問題は、要素を非静的として配置すると、絶対として配置された子にすぐに影響することです。

これは、親要素が静的である場合とは対照的に、これらの子の包含ブロックになるためです。後者の場合、子の包含ブロックは、静的以外の位置を持つ最初の祖先になります。絶対配置と包含ブロックの定義を参照してください（@Edouard Lopezに感謝）。このため、子要素の配置は絶対親に関連します。

また、@fredsbend が説明したように、絶対配置された div 要素は、静的に配置された div の場合のように、コンテナではなく、含まれている要素の幅に従って拡張されます。明示的な幅が設定されていない場合、これは子にも影響します。

于 2013-03-05T10:08:40.580 に答える