CSS ポジション
position プロパティは、要素に対して使用されるポジショニング（配置）方法の種類を指定します。
1. position プロパティの基本 (The position Property)
position プロパティは、要素の配置方法を指定します。
position プロパティには、以下の5つの値があります。
staticrelativefixedabsolutesticky
要素は、top、bottom、left、right プロパティを使用して配置されます。ただし、これらのプロパティは、先に position プロパティが設定されていない限り機能しません。また、position の値によって、これらのプロパティの動作も異なります。
2. position: static;
HTML 要素はデフォルトで static（スタティック）に配置されます。
スタティックに配置された要素は、top、bottom、left、right プロパティの影響を受けません。
position: static; が指定された要素は、特定の配置が行われるわけではなく、常にページの通常のフロー（文書流）に従って配置されます。
div.static {
position: static;
border: 3px solid #73AD21;
}3. position: relative;
position: relative; が指定された要素は、その要素が本来あるべき通常の位置（ノーマルフロー上の位置）を基準として配置されます。
リラティブ（相対的）に配置された要素の top、right、bottom、left プロパティを設定すると、元の位置からオフセット（移動）されます。他のコンテンツは、その要素によって残された空きスペースに合わせて調整されることはありません。
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}4. position: fixed;
position: fixed; が指定された要素は、**ビューポート（ブラウザの画面）**を基準として配置されます。つまり、ページをスクロールしても常に同じ場所に留まります。
top、right、bottom、left プロパティは、要素を配置する場所を指定するために使用されます。
フィックス（固定）配置された要素はページフローから完全に外れるため、本来あった場所にスペースは残りません。
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}5. position: absolute;
position: absolute; が指定された要素は、最も近い「ポジショニングされた（static 以外の値を持つ）」祖先要素を基準として配置されます。
ポジショニングされた祖先要素がない場合は、ドキュメントのボディ（<body>）を基準とし、ページのスクロールと共に移動します。
注意： 「ポジショニングされた」要素とは、position が static 以外の値（relative, fixed, absolute, sticky）を持つ要素を指します。
/* 親要素を基準とするための設定 */
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;
}6. position: sticky;
position: sticky; が指定された要素は、ユーザーのスクロール位置に基づいて配置されます。
スティッキー要素は、ユーザーのスクロール位置に応じて relative と fixed の間を切り替えるような挙動をします。ビューポート内で特定のオフセット位置に達するまでは relative として振る舞い、その後はその位置で「スタック（固定）」されます。
注意： このプロパティが機能するためには、top、bottom、left、right のうち少なくとも1つを指定する必要があります。
div.sticky {
position: -webkit-sticky; /* Safari 用 */
position: sticky;
top: 0;
background-color: yellow;
padding: 50px;
font-size: 20px;
}7. 要素の重なり (Overlapping Elements)
要素がポジショニングされると、他の要素と重なる場合があります。
7.1 z-index プロパティ
z-index プロパティは、要素のスタック順序（どの要素を前面または背面に配置するか）を指定します。
要素は、正または負のスタック順序を持つことができます。
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1; /* テキストの背面に配置 */
}スタック順序が大きい要素は、常にスタック順序が小さい要素の手前に表示されます。
備考： z-index は、ポジショニングされた要素（position: relative;、position: absolute;、position: fixed;、または position: sticky;）およびフレックスアイテム（display: flex; の直下の子要素）に対してのみ機能します。
8. ポジショニングプロパティ一覧
| プロパティ | 説明 |
|---|---|
bottom | ポジショニングされた要素の下端の位置を設定する |
clip | 要素をクリッピング（切り抜き）する。現在は clip-path が推奨される |
left | ポジショニングされた要素の左端の位置を設定する |
position | 要素のポジショニング方法の種類（static, relative, absolute, fixed, sticky）を指定する |
right | ポジショニングされた要素の右端の位置を設定する |
top | ポジショニングされた要素の上端の位置を設定する |
z-index | 要素のスタック順序を設定する |