ポジショニング in CSS
HTML内で要素を手動で配置できるCSSプロパティ
新着！ 私の44ページの電子書籍「CSS in 44 minutes」が発売されました！ 😃
#bottom
要素の位置をその下端に基づいて定義します。
デフォルト bottom: auto;
要素は自然な位置に留まります。
bottom: 20px;
要素がposition: **relative**の場合、要素は**bottom**値で定義された量だけ上に移動します。
bottom: 0;
要素がposition: **absolute**の場合、要素は最初に配置された祖先要素の下端から自身を配置します。
#left
要素の位置をその左端に基づいて定義します。
デフォルト left: auto;
要素は自然な位置に留まります。
left: 80px;
要素がposition: **relative**の場合、要素は**left**値で定義された量だけ左に移動します。
left: -20px;
要素がposition: **absolute**の場合、要素は最初に配置された祖先要素の左端から自身を配置します。
#position
要素の位置付け動作を定義します。
デフォルト position: static;
要素はページの自然な流れに留まります。
その結果、絶対配置されたピンクのブロックのアンカーポイントとしては機能しません。
また、以下のプロパティには反応しません
topbottomleftrightz-index
position: relative;
要素はページの自然な流れに留まります。
また、要素を配置済みにします。絶対配置されたピンクのブロックのアンカーポイントとして機能します。
また、以下のプロパティに反応します
topbottomleftrightz-index
position: absolute;
要素はページの自然な流れに留まりません。最も近い配置済み祖先要素に基づいて自身を配置します。
配置済みであるため、絶対配置されたピンクのブロックのアンカーポイントとして機能します。
また、以下のプロパティに反応します
topbottomleftrightz-index
position: fixed;
要素はページの自然な流れに留まりません。**ビューポート**に基づいて自身を配置します。
配置済みであるため、絶対配置されたピンクのブロックのアンカーポイントとして機能します。
また、以下のプロパティに反応します
topbottomleftrightz-index
#right
要素の位置をその右端に基づいて定義します。
デフォルト right: auto;
要素は自然な位置に留まります。
right: 80px;
要素がposition: **relative**の場合、要素は**right**値で定義された量だけ右に移動します。
right: -20px;
要素がposition: **absolute**の場合、要素は最初に配置された祖先要素の右端から自身を配置します。
#top
要素の位置をその上端に基づいて定義します。
デフォルト top: auto;
要素は自然な位置に留まります。
top: 20px;
要素がposition: **relative**の場合、要素は**top**値で定義された量だけ下に移動します。
top: 0;
要素がposition: **absolute**の場合、要素は最初に配置された祖先要素の上端から自身を配置します。
#z-index
z軸上の要素の順序を定義します。これは、**配置済み**要素（`static`以外のもの）でのみ機能します。
default z-index: auto;
順番はHTMLコード内の順番で定義されます。
- コード内で先にあるもの = 後ろ
- コード内で後にあるもの = 前
z-index: 1;
z-indexの値は他の値と相対的です。対象要素は兄弟要素の前に移動します。
z-index: -1;
負の値を使用できます。対象要素は兄弟要素の後ろに移動します。