19. positionプロパティを使いこなそう

目次

positionプロパティとは

CSSで指定できるpositionプロパティは要素の位置を調整するプロパティです。具体的に何ができるかというと、要素を本来の位置からずらしたり、要素同士を重ならせたり、要素を特定の位置に固定したりできます。

positionの値はstatic・relative・absolute・fixedを指定でき、初期状態(何も指定していない状態)ではstaticになっています。

それでは、それぞれの指定の仕方について見ていきます。

position: relative;

position: relative;は、要素を本来の表示位置からずらすことができます。

↓例えば、水色の箱の中にimgとpがあったとします。


ここで画像を下にずらしたいと思えば、以下のように指定します。


画像が30px分下にずれて、pと重なっているのが分かります。position: relative;の下のtopは、本来の表示位置から上にどれだけ余白を空けるかを指定しているので、考え方はpadding-topやmargin-topと似ていますね。

また、左に余白を作って右に要素を動かしたい場合、leftも同時に指定すればOKです。


↓topやleftの値にはマイナスの数値も指定でき、topがマイナスだと上に、leftがマイナスだと左に要素が移動します。



position: absolute;

position: absolute;は、position: relative;とセットで使い、relativeを指定した要素の表示位置を基準にして、absoluteを指定した要素の位置が決まります。

下の例では、水色の箱に対してrelativeを指定して箱の左上を基準とし、p要素にabsoluteを指定して基準の位置から右下にずらしてみました。


このように、本来ならpはimgの下に表示されて重なることはないはずですが、position: absolute;を指定したことで、imgに重なって表示されています。ちなみに、absoluteとは「絶対的な」という意味で、「重なってもいいから絶対にその位置に置く」といった感じのイメージです。

上の例ではtopとleftを指定して基準位置を左上にしていますが、top・rightで右上、bottom・rightで右下、bottom・leftで左下というように、基準位置を自由に設定することもできます。

(注)relativeは親要素に、absoluteは子要素に指定

1つ注意が必要なのは、position: relative;は親要素に、position: absolute;は子要素に指定しなければならない点です。

↓の例ではrelativeとabsoluteをimg・pの兄弟要素に指定してしまっているので、基準位置はimgにはなってくれません。


このように、p要素は箱を飛び出してスクリーンの左上に表示されているため、img要素に指定したposition: relative;が無視されていることが分かります。

position: fixed;

position: fixed;は、要素を特定の位置に固定し、画面をスクロールしても動かないようにできます。

例えばこのページでposition: fixed;を使っているのは、左にあるhomeボタンやscrollボタンなどで、右下にも画像を固定しています。これらの要素は、画面をスクロールしても常に同じ位置に表示されているのが分かるかと思います。

position: fixed;の基準となる要素は、ブラウザでwebページを表示している部分全体です。例えば、左上からの位置を指定したい場合はtop・left、右下からならbottom・rightなどを指定すればOKです。

ちなみに、画面右下の画像はこのように指定しています↓↓

また、topやleftなどの値はpxだけでなく%で指定することもできます。例えばtopを20%とすると、画面の高さに対して上から20%の位置が表示開始位置になります。

値をpxで指定すると端末のサイズによってはレイアウトが崩れることがあるので、%で指定する方法も覚えておきましょう。