【CSS】意外と難しい「position」の使い方を詳しく解説してみた

CSS初心者の頃、どう考えてもpositionを使うべき複雑なレイアウトを、floatとmarginで無理矢理組み立ててたのが懐かしいです… この記事の最新版を書き起こしました。2017年から使われるようになった「sticky」についての解説もあるので、気になる人はリンク先にGo！

【CSS】positionの使い方を詳しく解説してみる｜割と新しい「sticky」も紹介するよ！

CSSの配置系プロパティ（float,position）の挙動は、Web制作初心者にとって非常に理解しづらいものとなっています。
そこで今回は、CSS初心者の方でも分かりやすいようにpositionの使い方、挙動を解説していきます。

positionに指定できる値

.box{

position: ○○○○;

}

static	通常の位置に配置（デフォルト）
relative	通常の位置を基準とした相対位置
absolute	static以外を指定された親要素を基準とした絶対位置
fixed	ウィンドウを基準とした絶対位置

positionプロパティに指定出来るのは上記の通りです。親要素がstaticの場合にabsoluteを指定するとfixedと同じ挙動になりますが、まず使うことはありませんので、親要素には必ずrelativeを指定することになります。

ついでに、positionと一緒に使うことの多いプロパティである「top,right,bottom,left,z-index」についてもまとめておきます。

top: ○○px;	基準点の上から、○○px下に移動（%でも可,マイナスの値も可）
right: ○○px;	基準点の右から、○○px左に移動
bottom: ○○px;	基準点の下から、○○px上に移動
left: ○○px;	基準点の左から、○○px右に移動
z-index: ○;	要素の重なり順（数値が大きいほど上,マイナスの値も可）

ここで注意しなくてはいけないのは、これらのプロパティはpositionがstaticだと使えないということです。ここで悩んだ人って結構多いと思います…

それでは実際に動かして見てみましょう。

relative

</div>

.wrap_sample{

width: 300px;

height: 200px;

margin: 0 auto;

background: #333;

}

.relative_sample{

position: relative;

width: 50px;

height: 50px;

background: #f00;

opacity: 0.5;

}

これだけだと何も変わらないですね。

.relative_sample{

position: relative;

top: 50px;

left: 50px;

width: 50px;

height: 50px;

background: #f00;

opacity: 0.5;

}

上から下に50px、左から右に50px移動させてみました。これは簡単。

.relative_sample{

position: relative;

bottom: 25px;

right: 25px;

width: 50px;

height: 50px;

background: #f00;

opacity: 0.5;

}

基準となる位置、つまり初期位置の右から左に25px、下から上に25px移動させました。こんな感じで要素を貫かせたい時がたまーにありますが、ネガティブマージンを使うよりもずっとスマートです。

absolute

</div>

.wrap_sample{

position: relative;

width: 300px;

height: 200px;

margin: 0 auto;

background: #333;

}

.absolute_sample{

position: absolute;

top: 50px;

left: 50px;

width: 50px;

height: 50px;

background: #f00;

opacity: 0.5;

}

今のところ、relativeのサンプルと位置は同じです。
親要素のwrap_sampleにrelativeを指定するのを忘れずに！

.absolute_sample{

position: absolute;

bottom: 25px;

right: 25px;

width: 50px;

height: 50px;

background: #f00;

opacity: 0.5;

}

はい。今度はrelativeと全く違う位置に表示されました。
absoluteが指定された要素は、初期位置ではなく親要素を基準として配置されるので、親要素であるwrap_sampleの下から上に25px、右から左に25pxの位置に配置されたというわけです。

.absolute_sample{

position: absolute;

bottom: 75px;

right: -25px;

width: 50px;

height: 50px;

background: #f00;

opacity: 0.5;

}

右側に突き抜けるボックスです。これをfloatとネガティブマージンで作るとなるとかなりめんどくさい、というかコードが汚くなるんですが、absoluteとright:マイナス値を使えば簡単です。

fixed

次はfixedの解説を…と言いたいところなんですが、fixedはちょっとサンプルの用意がめんどくさいので飛ばします…
ただ、absoluteさえ理解出来ればfixedも簡単に使えるはずです。要はウィンドウを基準とした固定表示のabsoluteなので、特に難しいことはありません。

z-indexを使った重なり順の制御

</div>

.wrap_sample{

position: relative;

width: 300px;

height: 200px;

margin: 0 auto;

background: #333;

}

.z_sample_1{

position: absolute;

top: 50px;

left: 25px;

width: 100px;

height: 100px;

background: #f00; /* 赤 */

opacity: 0.65;

}

.z_sample_2{

position: absolute;

top: 50px;

left: 100px;

width: 100px;

height: 100px;

background: #0f0; /* 緑 */

opacity: 0.65;

}

.z_sample_3{

position: absolute;

top: 50px;

left: 175px;

width: 100px;

height: 100px;

background: #00f; /* 青 */

opacity: 0.65;

}

z-index（重なり順）を指定しなかった場合、このように後ろの要素が上になります。
サンプルの場合「青>緑>赤」の順番ですね。

.z_sample_1{

position: absolute;

top: 50px;

left: 25px;

width: 100px;

height: 100px;

background: #f00; /* 赤 */

opacity: 0.65;

z-index: 3;

}

.z_sample_2{

position: absolute;

top: 50px;

left: 100px;

width: 100px;

height: 100px;

background: #0f0; /* 緑 */

opacity: 0.65;

z-index: 2;

}

.z_sample_3{

position: absolute;

top: 50px;

left: 175px;

width: 100px;

height: 100px;

background: #00f; /* 青 */

opacity: 0.65;

z-index: 1;

}

赤のボックスにz-index:3、緑のボックスにz-index:2、青のボックスにz-index:1を指定してみました。これで重なり順が「赤>緑>青」になったのが分かるかと思います。

relative、absoluteの細かい違い

先程のサンプルだけだと分からない、relativeとabsoluteの違いを説明します。比較用のサンプルを用意したので、挙動の違いを確認してみてください。
上がrelative、下がabsoluteです。

ああああああああああああああああああああああああああああああああああああああああああああああああああああああ

ああああ...ああああ

</div>

<br />

ああああ...ああああ

</div>

relativeな要素は本来配置されるはずだったスペースが確保されたまま移動するため、後続の内容が下に押し出されます。
それに対し、absoluteは本来配置されるはずだったスペースが破棄されるので、後続の内容が押し出されることなく表示されます。

以上でpositionの基本的な解説は終わりです。fixed端折ったけど。

適切な場所で使えばdivとfloatだらけのコードを簡略化出来ますし、重なりを利用して画像にエフェクトを掛けたりすることも可能と、覚えるとなかなか楽しいので色々と実験してみてください！

アイデアハッカー