positionプロパティについて
positionプロパティとは
positionプロパティとは、要素の位置を指定する基準点を設定するプロパティ。
top、left、right、bottomというプロパティと一緒に使用することで要素の位置を調整することができる。
- position: static; 通常の位置に配置(デフォルト)
- position: relatibe; 本来表示されるべき位置を基準として、位置を決定する。
- position: absolute; 親要素を基準として、位置を決定する。
- position: fixed; ウインドウを基準とした絶対位置を指定する。
top、left、right、bottomプロパティ
positionで指定した基準となる位置から、どの程度離れた位置に配置するかをpxなどで指定する。
＊positionがstaticだと無効。
例)
以下の例で、position: absolute;を使用し、親要素の左上から計算して、上から何px、左から何pxの位置に配置するかを指定している。
.sample-box {
position: absolute;
top: 10px;
left: 20px;
}
z-indexプロパティ
要素の重なり順を指定できる。
数値が大きいほど上、小さいほど下。マイナスの値も取れる。
＊positionがstaticだと無効
