ワードプレスで初心者が覚えておくべきpositionプロパティの２つの使い方
CSSのpositionプロパティは、ひと言でいうと『要素（コンテンツ）の位置を決める』プロパティです。
ワードプレスでカスタムCSSを使用するときもよく使うので、ぜひ覚えておきたいですね。
本記事では、初心者のあなたがpositionプロパティを使いこなすために覚えておくべき２つの使い方を解説していきます。
・positionプロパティを使うことで、コンテンツの配置を自由に変更できるようになる
・positionプロパティを使えば、コンテンツとコンテンツを重ねて配置することもできるようになる
このように、positionプロパティを使えば、あなたのワードプレスサイトもカスタマイズできる幅がぐっと広がります。
positionプロパティの値
そもそもpositionプロパティには次の４つがあります。
- position: static;
デフォルト値。何も指定しなければ、このstaticな状態にあります。 - position: relative;
要素の配置を相対値で決定する - position: absolute;
要素の配置を絶対値で決定する - position: fixed;
要素をスクロールに対して固定させる - position: sticky;
要素をスクロールに追従させる
このうち、初心者がまず押さえておくべきはposition:relative;とposition:absolute;の２つです。
そして、要素の位置をコントロールするtop,right,bottom,leftプロパティ
重ね合わせの順番をコントロールするz-indexプロパティ
と合わせて使用することになります。
- top・・・上からの位置を指定する
top:20px; なら上から20pxのところに要素の上端が配置される - left・・・左からの位置を指定する
left:20px; なら左から20pxのところに要素の左端が配置される - bottom・・・下からの位置を指定する
bottom:20px; なら下から20pxのところに要素の下端が配置される - right・・・右からの位置を指定する
right:20px なら右から20pxのところに要素の右端が配置される
- z-index・・・要素を重ねる順番を指定する
（z-index:10; など。数字の小さいものが下となる）
理解しやすいためにposition:absolute;の使い方から紹介していきましょう。
position:absolute
準備としてHTMLとCSSで、
・bodyエリア（グレー）・・・paddingで50pxの余白がある
・黄色のボックス（300×300px）
・緑のボックス（200×200px）
・緑のボックスの中に青ボックス（100×100px）
の構成を作成しておきます。
<body>
<div class="yellow"></div>
<div class="green">
<div class="blue"></div>
</div>
</body>body {
margin:0;
padding:50px;
background-color: #aaa;
}
.yellow {
background-color: #ff0;
width:300px;
height:300px;
}
.green {
background-color: #0f0;
width:200px;
height:200px;
}
.blue {
background-color: #00f;
width:100px;
height:100px;
}青のボックスにposition:absolute;を追加してみましょう。
このとき、同時にtop:0; left:0; と左上に配置指定の記述もします。
すると、青のボックスは親要素の緑ボックスから抜け出て、body全体の左上に移動します。
このように、position: absolute;は、top,leftなどで指定した位置に自由に配置することができます。
この場合、配置プロパティの基準となるのはbodyタグで指定したエリアであることに注目してください。
配置指定をbottom:0; right:0; に変更するとbodyタグで指定したエリアの右下に配置されます。
position:relative
先ほどの青ボックスの位置を今度はtop:50px; left:50px;の位置にしておきます。
bodyエリアの上から50px、左から50pxのところに配置されます。
この状態で、青ボックスの親要素である緑ボックスにposition:relative;をかけてみましょう。
すると、青ボックスはbodyエリアでなく親要素の緑ボックスを基準に配置されるようになります。
このように、親要素にposition:relativeがかかっているかどうかで、配置の基準が変わります。
①position:absoluteをかけてtop,leftなどで位置指定することで、自由に要素の位置を変更することができる。
②配置位置の基準は、親要素にposition:relativeをかければ親要素が基準となり、かけなければbodyエリア全体が基準となる。
※②でいう親要素とは、直上の親だけでなく、親の親など複数階層上も含めた親となります。
すなわち、要素の親をずっと遡って、どこかでposition:relativeがかかっていればその要素が基準となり、なければ最後にbody要素が基準となるわけです。
ワードプレスでpositionプロパティを使う場合は、上記①②の2点を覚えておくだけで、ぐっとレイアウトの幅が広がります。
position:relativeでも位置配置は変更できる
では、position:relative;とtop,leftなどの配置プロパティを併用するとどうなるでしょうか？
先ほどposition:relativeをかけた緑ボックスにtop:-20pxとしてみましょう。
すると、緑ボックスが元の位置から20px上へ移動しました。
このように、positionプロパティでは、要素の上に要素を重ねて配置することもできます。
上の例でもわかるように、position:relativeにtop,leftなどで位置指定すると、元々の位置を基準として相対的に位置変更をすることになります。
これが、親要素やbody要素などの基準から絶対値で位置変更するposition:absoluteとの違いでもあります。
- position: relative;・・・要素の配置を元の位置からの相対値で決定する
- position: absolute;・・・要素の配置を基準要素からの絶対値で決定する
しかし実際は、position:relativeをかけて位置変更をする、という使い方はほとんどありません。
したがってやはり、position:absoluteで位置変更をする。その基準位置はposition:relativeが親要素にあるかどうかで決まる、というのが基本的な使い方だと覚えておけばよいでしょう。
z-indexで要素の重なりをコントロールする
先の例では、黄色ボックスの上に緑ボックスが重なりました。
このように要素が重なるときは、HTMLで後から記述された要素が上に重なることになります。
しかしz-indexを使用すれば、この重なる順番をコントロールすることができるので紹介していきましょう。
黄色ボックスが上になるように変更するには次のようにします。
黄色ボックスにposition:relativeをかけた上で、黄色ボックスと緑ボックスにz-indexを指定する。
z-indexの値は黄色ボックスの方を大きくする。
このように、z-indexで値を指定すると、値の大きい要素の方が上に重なるようになります。
ただしz-indexを適用するには、position:static以外のpositionプロパティがその要素にかかっている必要があります。そのために、黄色ボックスにもposition:relativeをかけておいたわけです。
対象要素にposition:static以外のpositionプロパティがかかっている場合、z-indexで値の大きい要素が上に重なる。
まとめ
positionプロパティで非常によく使われるrelativeとabsoluteの使い方について解説してきました。
もう一度要点だけ書きだしておきましょう。
①position:absoluteをかけてtop,leftなどで位置指定することで、自由に要素の位置を変更することができる。
②配置位置の基準は、親要素にposition:relativeをかければ親要素が基準となり、かけなければbodyエリアが基準となる。
対象要素にposition:static以外のpositionプロパティがかかっている場合、z-indexで値の大きい要素が上に重なる。
