CSS 位置学習_html/css_WEB-ITnose

はじめに

CSS Position には 4 つの属性があります:

相対 絶対 固定 静的 (デフォルト)

例

<div id="parent">     <div id="sub1">sub1</div>     <div id="sub2">sub2</div></div>

sub1 と sub2 は兄弟関係であり、parent はそれらの親要素です。

1. 相対 (相対配置)

相対配置とは、この要素の元の位置に対する相対的な配置を指し、元の位置を占めます。

いわゆる元の位置は、相対属性が設定されていないときの位置(つまり、静的属性が使用されているときの位置)を指します。

相対オフセットは、マージンの左上側を基準とします。

たとえば、sub1 に相対属性を設定した後、sub2 の位置は変更されずに、上、右、下、左の属性に従ってオフセットされます (sub1 は元の位置を占めます)

次にsub2 に相対属性を設定すると、元の位置に対して相対的にオフセットされます (sub2 の位置は引き続き占有されます)

2. 絶対 (絶対位置決め)

絶対位置決めは左上に基づいています。 最近配置された 親オブジェクトの パディングの隅 配置は基本的に次の 2 つの状況に分けられます:

たとえば、sub1 が絶対に設定されている場合、sub1 の親要素 (親またはその親要素) が絶対または相対に設定すると、sub1 は親要素に対して相対的に配置されます。 親要素が絶対または相対に設定されていない場合、sub1 は本体に対して相対的に配置されます。

このとき、sub1の位置が「空いた」ので、sub2はsub1の位置に移動し(sub1が浮いているのも分かりますが、これをDreamweaverではレイヤーと呼んでいます)、そのドキュメントフローは親をベースにしたものとなります。 。

sub2 に絶対を設定すると、親に対しても相対になります。

3. fixed

fixed は特別な絶対値です。つまり、fixed は常にボディを位置決めオブジェクトとして使用し、ブラウザー ウィンドウに従って位置決めされます。

4. static (デフォルト)

position 属性が設定されていない場合、通常、通常のドキュメント フローに従って配置されます。

参考:

http://www.cnblogs.com/Zigzag/archive/2009/02/19/position.html

http://www.w3school.com.cn/css/css_positioning.asp