positionプロパティは、要素（静的、相対、固定または絶対）に使用する測位方法のタイプを指定します。
位置プロパティ
positionプロパティは、素子に用いられる測位方法のタイプを指定します。
四つの異なる位置の値があります。
-
static -
relative -
fixed -
absolute
要素は、トップ、底、左、および右のプロパティを使用して配置されています。 場合を除きしかし、これらのプロパティは機能しませんpositionプロパティが最初に設定されています。 彼らはまた、位置の値に応じて異なる動作します。
position: static;
HTML要素は、デフォルトでは、静的に配置されています。
静的な位置のエレメントは上、下、左、右の特性の影響を受けません。
持つ要素position: static;任意の特別な方法で配置されていません。 それは、常にページの通常のフローに従って配置されます。
ここで使用されているCSSは次のとおりです。
position: relative;
持つ要素position: relative;その正常な位置に対して配置されています。
上、右、下、相対的に位置付け要素の左のプロパティを設定すると、それが離れて通常の位置から調整されることになります。 その他のコンテンツは、要素によって残された隙間に収まるように調整されません。
ここで使用されているCSSは次のとおりです。
position: fixed;
持つ要素position: fixed;それは常に、ページがスクロールされた場合でも、同じ場所に留まることを意味し、ビューポートに関連して配置されています。 頂部は、右、下、左プロパティは要素を位置決めするために使用されます。
固定要素は、それが正常に配置されていたページにギャップを残しません。
ページの右下隅に固定された要素に注目してください。 ここで使用されているCSSは次のとおりです。
例
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
} »それを自分で試してみてください position: absolute;
持つ要素position: absolute; （代わりにビューポートに対して位置決めの、固定など）に最も近い位置付け先祖に関連して配置されています。
しかしながら; 絶対位置指定要素が全く配置さ祖先を持っていない場合、それは文書本体を使用し、ページのスクロールに沿って移動します。
注：A "positioned"要素が位置以外のものであるものであるstatic 。
ここでは簡単な例です：
ここで使用されているCSSは次のとおりです。
例
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
»それを自分で試してみてください 重複要素
要素が配置されているときは、他の要素を重複することができます。
z-indexプロパティは（背後の要素が目の前に配置する必要があり、または、その他）要素のスタック順序を指定します。
要素は、正または負のスタック順序を持つことができます。
これは見出しです
画像-1のz屈折率を有しているので、テキストの後ろに配置されます。
大きなスタック順序を持つ要素は、下のスタック順序を持つ要素の前に常にあります。
 | 注：2位置付け要素はせずに重複する場合z-index指定され、HTMLコードの最後に位置する要素がトップに表示されます。 |
|---|
画像内のポジショニングテキスト
画像の上にテキストを配置する方法：
その他の例
素子の形状を設定します。
この例では、素子の形状を設定する方法を示します。 要素は、この形状にクリップされた、と表示されます。
スクロールを使用して、要素にオーバーフローを表示する方法
この例では、要素の内容は指定された領域に収まるには大きすぎるときに、スクロールバーを作成するために、overflowプロパティを設定する方法を示します。
自動オーバーフローを処理するようにブラウザを設定する方法
この例では、自動的にオーバーフローを処理するためにブラウザを設定する方法を示します。
カーソルを変更
この例では、カーソルを変更する方法を示します。
練習で自分自身をテスト！
すべてのCSSポジショニングプロパティ
| プロパティ | 説明 |
|---|---|
| bottom | 位置付けボックスの下マージンのエッジを設定します。 |
| clip | クリップ絶対配置要素 |
| cursor | カーソルの種類を表示するように指定し |
| left | 位置付けボックスの左マージン辺を設定します。 |
| overflow | コンテンツは要素のボックスをオーバーフローした場合に何が起こるかを指定します |
| overflow-x | それは要素のコンテンツ領域をオーバーフローした場合、コンテンツの左/右のエッジをどのように処理するかを指定します |
| overflow-y | それは要素のコンテンツ領域をオーバーフローした場合、コンテンツのトップ/ボトムのエッジをどのように処理するかを指定します |
| position | 要素の位置決めのタイプを指定します |
| right | 位置付けボックスの右マージン辺を設定します。 |
| top | 位置付けボックスの上マージン辺を設定します。 |
| z-index | 要素のスタック順序を設定します |