【CSS】positionプロパティで要素の位置を調整する

WEBページでは各要素をどこに表示するかが読みやすさや分かりやすさの面で重要になってきます。HTMLで記述された要素は上から下へ順番に並びますが、positionプロパティを設定することでその位置を調整することが可能になります。今回はpositionプロパティの使い方について解説します。

positionプロパティで要素の位置を変更する

要素の位置を変更するにはpositionプロパティを使用します。主に以下4つの値を設定します。

値	解説
static (初期状態)	通常の位置に配置する
relative	通常の位置を基準に位置を決定する
absolute	親要素を基準に位置を決定する
fixed	ウインドウを基準に位置を決定する

positionプロパティと合わせて、位置を決定するための「top(上からの位置)」、「right(右からの位置)」、「bottom(下からの位置)」、「left(左からの位置)」プロパティを使用します。positionプロパティで位置を決定するための基準を決めて、top、right、bottom、leftプロパティで実際の位置を決定します。

top、right、bottom、leftプロパティは「〇〇px」、「〇〇%」のように数値で指定でき、topとleft、bottomとrightというように2つ設定することで位置を決定できます。topとbottom、leftとrightという組みあわせで使用することはほとんどありませんが、例えばtopを0、bottomを0と設定した場合には要素は縦いっぱいに広がって表示されます。同様にleftを0、rightを0にした場合には横いっぱいに表示されます。

次にpositionプロパティで設定する値について解説します。(top、right、bottom、leftプロパティの使い方は理解しやすいと思うので省略します。)

position: static;　通常の状態

staticは初期状態として設定されている値なので、positionプロパティを指定しない場合は自動的にstaticが適用されます。topやleftでも位置を変更することはできず、z-indexも指定できません。

z-indexは重なり順を指定するプロパティです。詳しくは後ほど解説します。

See the Pen
position: relative; by そーたろう (@soh-files)
on CodePen.

上のコードでは親要素となる四角の中にグレーの四角を3つ表示しています。2つ目の四角に「position: static;」を適用していますが、これは初期状態で常に適用される値なので3つの四角すべてにstaticが適用された状態です。HTMLで記述されたとおりに縦1列で並んでいます。また2つ目の要素には「top: 20px;」と「left: 20px;」というように位置を変更するプロパティが指定されていますが、positionがstaticのため無効となっています。

position: relative;　初期状態を基準に位置を調整する

relativeはstaticで通常表示される位置を基準として、top、leftなどで位置を調整します。top、right、bottom、leftで位置を指定できるほかz-indexを設定することもできます。

relativeが設定された要素は位置が移動しても元の位置に高さが残った状態になります。そのため位置を変更しても下にある要素が上に詰められることはありません。下の例を見てください。

See the Pen
position: relative; by そーたろう (@soh-files)
on CodePen.

2つ目の要素にrelativeを指定し、topに20px、leftに20pxを設定しています。これによってstaticで表示する位置から下へ20px、右を20pxずれた位置に表示されています。また重なり順について、relativeを指定するとその要素が上に浮いたような状態となり重なり順も上にくることになりますが、z-indexを指定することで後ろに表示しています。

position: absolute;　親要素の位置を基準に位置を調整する

relativeはpositionプロパティに「relative」か「fixed」のいずれかが設定されている一番近い親要素の位置を基準に位置を調整する値です。多くの場合、直前にある親要素にrelativeを指定して使用します。親要素のいずれにもrelative、またはfixedが設定されていない場合にはbodyを基準とします。relativeと同様にtop、right、bottom、leftで位置を指定できるほかz-indexで重なり順を変更することも設定することもできます。

absoluteが設定された要素は浮き上がったような状態になり、relativeと違って元の位置に高さが残りません。そのため下にある要素が上に詰められます。下の例を見てみると、2つ目の四角にabsoluteを指定したことで2つ目の四角が浮きあがり下の3つ目の四角が上に詰められています。またtopを0、leftを0に設定しているため、親要素である四角の左上と2つ目の四角の左上がくっつくように位置が移動しています。

See the Pen
position: absolute; -1 by そーたろう (@soh-files)
on CodePen.

divなどのブロック要素はwidthを設定しない限り親要素の幅いっぱいに広がるように自動的に幅が設定されますが、positionでabsoluteを指定するとインライン要素のようにコンテンツに合わせて幅が変わるようになります。下の例では子要素である3つの四角の幅を指定していません。1つ目と3つ目の四角は親要素の幅に合わせた幅で表示されていますが、2つ目の四角にはabsoluteが指定されているため通常のブロック要素のように親要素いっぱいに幅が広がることはなく、コンテンツに合わせた幅になっています。

See the Pen
position: absolute; -2 by そーたろう (@soh-files)
on CodePen.

position: fixed;　ブラウザのウインドウを基準に位置を調整する

fixedを設定するとウインドウを基準に位置を変更できるようになります。ウインドウを基準にするため、ページをスクロールした場合でも画面の同じ位置に要素が表示されるようになります。

absoluteと同様にfixedが設定された要素は元の位置に高さが残らず、下にある要素が上に詰められます。fixedを設定するとウインドウが基準となるため、下の例のようにtopを0、leftを0とするとウインドウの左上にぴったりとくっつくように表示されます。そしてページをスクロールしても要素の位置は変わらず左上に表示されたままになります。

See the Pen
position: fixed; by そーたろう (@soh-files)
on CodePen.

グローバルメニューをウインドウ上部に常に表示させたいといった場合にはfixedを設定することで実現できます。

z-index　要素の重なり順を変更する

HTMLで記述された要素は基本的にあとに書かれたものが上になります。またpositionプロパティにrelativeやabsoluteが指定された場合、その要素は他の要素の上に重なるように表示されます。このように要素の重なり順はある程度決定されていますが、z-indexプロパティを指定することで要素同士の重なり順を変更することができます。z-indexは「0」や「100」のように整数で設定し(設定可能範囲は -2147483647～2147483647)、数値が大きいほど上に表示されます。指定しない場合は「0」となっているので、それより後ろに表示させたい場合にマイナスの値を設定します。

下の例では3つの四角にabsoluteを設定して重ねて表示させています。重なり順は変更していないため、最初に書かれた赤色の四角が一番後ろで、あとに書かれた青色の四角が一番前に表示されています。

See the Pen
z-index -1 by そーたろう (@soh-files)
on CodePen.

次の例ではそれぞれの四角にz-indexを指定しています。一番はじめの赤色の四角には「3」、次の緑色の四角には「2」、最後の四角には「1」を指定しているので、重なり順も最初の赤色の四角が一番前で、最後の青色の四角が一番後ろに表示されています。

See the Pen
z-index -2 by そーたろう (@soh-files)
on CodePen.

まとめ

今回は要素の位置を調整するpositionプロパティと重なり順を変更するz-indexプロパティについて解説しました。要素の位置を調整することで情報を効果的にWebページに表示することができ、分かりやすいページを作成することができます。それぞれの値を適切に設定できるようにしましょう。