【CSS】positionプロパティの使い方について

4-1. fixed

positionプロパティにfixedを指定した場合、要素は指定された位置で固定されます。（ページをスクロールした際ももとの位置の状態を保ちます。）

■fixedの使用例

要素は画面左上を基準に上から100px、左から200pxの位置に移動して固定されます。

position: fixed;
top: 100px;
left: 200px;

4-2. relative

positionプロパティにrelativeを指定した場合、もとの位置を基準に指定された数値の分だけ移動します。

■relativeの使用例

要素はもとの位置を基準に上から100px、左から200pxの位置に移動します。

position: relative;
top: 100px;
left: 200px;

4-3. absolute

positionプロパティにabsoluteを指定した場合、ウィンドウを基準に指定された数値の分だけ移動します。親要素にrelativeが設定されている場合は、ウィンドウではなく親要素の位置が基準となります。子要素にabsoluteが設定されると親要素から独立するため、親要素の高さがなくなるのが特徴です。

■absoluteの使用例（親要素にrelativeが指定されていない場合）

要素はウィンドウを基準に上から100px、左から200pxの位置に移動します。

position: absolute;
top: 100px;
left: 200px;

■absoluteの使用例（親要素にrelativeが指定されている場合）

要素は親要素を基準に上から100px、左から200pxの位置に移動します。

position: absolute;
top: 100px;
left: 200px;

■absolute（複数）の使用例（親要素にrelativeが指定されている場合）

子1の要素は親要素を基準に上から100px、左から200pxの位置に移動します。子2の要素は親要素を基準に上から220px、左から470pxの位置に移動します。子1の要素はz-indexに20、子2の要素は10が設定されており、子1の方が値が大きいので子1が前に表示されます。

[div子1]

position: absolute;
top: 100px;
left: 200px;
z-index: 20;

[div子2]

position: absolute;
top: 220px;
left: 470px;
z-index: 10;

4-4. static

positionプロパティにstaticを指定した場合、もとの位置に配置されます。指定したpositionをリセットしたい場合などに使用します。positionプロパティの初期値です。

4-5. sticky

positionプロパティにstickyを指定した場合、もとの位置に配置されますが、親要素の中で固定されて表示されます。サイドバーの追従バナー等でよく使用されます。上記の値に比べると実務での使用頻度は少なめです。