もくじ
前提
positionプロパティ
要素に対し基準位置からの配置位置を指定するときに用いられるプロパティです。
値 | 区別 | 意味 |
---|---|---|
static | - | 初期値 |
relative | |
自身が基準の要素となり、相対的に指定 |
absolute | 絶対位置指定 | 親要素を基準に絶対位置を指定 |
fixed | 絶対位置指定 | サイト全体を基準に絶対位置で固定したい場合に指定 |
sticky | 粘着位置指定 | 指定した値を超えるまではstatic 、その後はfixed の特徴となる |
以下のように指定します。
position: absolute;
距離指定のプロパティ
position
プロパティをstatic
以外で指定した時に有効。
プロパティ | 意味 |
---|---|
top | 要素の上辺の距離を指定する。left と共に使用することが多い |
left | 要素の左辺の距離を指定する。top と共に使用することが多い |
right | 要素の右辺の距離を指定する。bottom と共に使用することが多い |
bottom | 要素の下辺の距離を指定する。right と共に使用することが多い |
以下のように、値には数値を指定します。
top: 10px; left: 0; // 0は単位不要
要素の配置順
通常、要素は記述した順番通りに配置されます。
- HTML
<div class="box green"></div> <div class="box pink"></div>
.box { width: 5rem; height: 5rem; }
(色のクラスはカラー設定のみなので割愛)
このHTMLの場合、特に指定しない限りgreenクラスの次に、pinkクラスが配置されます。
基準の位置
position
プロパティを指定しない場合、前述したとおり通常の配置順になります。そこで、どこを基準にして要素を配置するかを指定する時に用いるのが、position
プロパティです。
それぞれの違い
static(初期値)
特に指定しなければこれです。
top
など数値指定しても位置指定の効果を得られないので、位置指定したい場合は後述のabsolute
などを指定します。
また、次項のz-index
プロパティを指定したい場合は、static
以外を指定します。
absolute(要素同士を重ねたり)
通常、要素同士は重なっていません。
しかし、position: absolute;
を使えば、要素同士を重ねて表示することが出来ます。
- HTML
<div class="green"></div> <div class="pink"></div>
要素を重ねるためにposition: absolute;
を指定します。
今回はpinkクラス要素をgreenクラス要素に重ねます。pinkクラスを、本来の位置からどれほど移動させるか指定すればOK。top
プロパティとleft
プロパティを使います。
.pink { position: absolute; top: 3rem; left: 1.5rem; }
もちろん、重ねるだけでなく位置を変更させるためにも使えます。
.pink { position: absolute; top: 3rem; left: 10rem; }
relative(親要素を基準に)
親(祖先も可)要素にposition: relative;
と指定すると、その親要素を基準にして子要素の位置を指定することができます。
下を例にしてみます。(カラー指定は割愛)
- HTML
<div class="parent"> <div class="box green"></div> <div class="box pink"></div> </div>
- CSS(position指定なし)
.parent { width: 15rem; height: 12rem; margin: 2rem; } .box { width: 5rem; height: 5rem; }
わかりやすいように、親要素に色とマージンをつけて位置をずらしています。白地はサイト全体とします。
親要素にrelative
を指定し、そこから相対的に移動させたい要素にはabsolute
を指定します。
- CSS(position指定あり)
.parent { position: relative; // 追加 width: 15rem; height: 12rem; margin: 2rem; } .box { width: 5rem; height: 5rem; } .pink { position: absolute; // 追加 top: 3rem; // 追加 left: 1.5rem; // 追加 }
もし親要素にrelative
を指定しなかった場合、基準要素はページ全体となります。
.parent { // relativeを削除 width: 15rem; height: 12rem; margin: 2rem; }
pinkクラス(親要素もピンク系にしてしまい反省)のCSSを改めて確認すると、サイト全体に対して指定されているのがわかります。
.pink { position: absolute; top: 3rem; left: 1.5rem; }
fixed(要素を固定)
fixed
を指定すると、指定した位置に固定されます。基準点はサイト全体の左上になります。
サイドバーやヘッダー、フッターなどに用いることが多く、スクロールしても表示しておきたい要素に対して指定します。
sticky(途中から固定)
top
などで指定した位置にくるまでは通常の要素とかわりませんが、指定した位置になるとそこに固定されます。
たとえば、top: 0px:
(0でもpx
など単位必須)を指定したとすると、スクロールして要素の基準点がtop: 0px:
になった位置に固定されます。
- HTML
<div class="box green"></div> <div class="box pink"></div> <div class="box blue"> <p>1行目</p> <p>2行目</p> <p>3行目</p> </div>
.box { width: 15rem; height: 5rem; } .pink { position: sticky; top: 0px; } .blue { height: 100rem; }
↓スクロール
↓スクロール
sticky
を指定したpinkクラスだけが固定されています。pinkクラスの下にあるはずのblueクラスの要素がpinkクラスを超えて上にスクロールされていきます。
z-index(重なり順)
通常、後に記述された要素が手前に重なります。
その重なり順を任意に変更できます。
z-index
プロパティは要素の重なりの優先順位を指定するプロパティです。
z-index: 値;
値は整数で入力し、大きい数値のものほど手前に表示されます。マイナスは可能ですが、小数点は指定できません。
z-index
を指定するには、同じ要素にposition
プロパティが必須になります。ただしstatic
(初期値)だとz-index
は効きません。
.pink { position: absolute; top: 3rem; left: 1.5rem; }
↓これをz-index
を指定して重ね順を逆にします。
.green { position: absolute; z-index: 1; } .pink { position: absolute; top: 3rem; left: 1.5rem; z-index: 0; }
greenクラスが手前になり、重なり順が逆になりました!
豆知識
z-index
プロパティの値は±2147483647だそうです。絶対必要ない桁ですね。
ただし、どんなことがあっても重ね順を一番手前にしたい!!っていう要素がある場合など、範囲内であれば必要以上に大きい値を指定しても問題ありません。
例
z-index: 10000;
基本的に何も指定していない場合はz-index:0;
です。そのためマイナスの値にすると、何も指定していない要素よりも奥に配置されます。
まとめ
position
はとても頻出するプロパティですが、理解していないとうまく表現できないことも多いので、是非理解して活用していきましょう!
参考URL
position - CSS: カスケーディングスタイルシート | MDN