Class 18 CSS Positioning

Class 18 CSS Positioning

4つの位置決め方式

StaticロケータHTML要素のデフォルト値、すなわちロケータ

なし

Fixed位置決め

                     。
                 

Relative位置決め

                    。

絶対位置決めAbsolute位置決め

                          ，             ，         。

CSSボックスモード4(絶対位置決めと相対位置決め)を徹底的に理解する

絶対位置決め(absolute):

この位置決め方法が付与されたオブジェクトをドキュメントストリームからドラッグし、left,right,top,bottomなどの属性を使用して最も近い位置決め設定の親オブジェクトに対して

を絶対位置決め.

オブジェクトの親が位置決め属性を設定していない場合、すなわちHTML位置決め規則に従っている場合、bodyオブジェクトの左上隅を参照として位置決めします.

絶対位置決めオブジェクトは積層可能であり、積層順序はz-index属性によって制御可能であり、z-index値は無単位の整数であり、大きいものは最上位であり、負の値があることができる.

相対位置決め(relative):

1.オブジェクトは積層できません.left、right、top、bottomなどのプロパティに基づいて、通常のドキュメントストリームで自分の位置をオフセットします.
相対位置決めは常に絶対位置決めと組み合わせて使用され、一般的に親に相対位置決め方式を設定し、子要素はそれに対して便利な絶対位置決めを行うことができる.

重複する要素

要素は、ページ上の他の要素を上書きできます.
z-indexプロパティは、1つの要素のスタック順序(どの要素が前または後ろに配置されるべきか)を指定します.1つの要素には、正数または負数のスタック順序があります.

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

より高いスタック順序を持つ要素は、常に低いスタック順序要素の前にあります.
概略図:
補足:詳細な配置プロパティ:

clipクリップ絶対位置決め要素

cursor表示カーソルは指定のタイプ

に移動する.

overflowは、要素のコンテンツがその領域をオーバーフローするときに起こることを設定する--すなわち、

をスクロールする.
その他のプロパティー