【CSS】positionをまとめておきました（relative / absolute / fixed / sticky / static）
relativeって？
absoluteって？
stickyって？
どうして思い通りの配置にならないの？
スクールのみんなもよくチャレンジしているCSSのpositionプロパティ。
種類がたくさんあったり、それぞれちょっとクセもあるので、特性をしっかり理解していないとデザインがグチャグチャのカオス状態になりますが、使いこなせれば、要素を自由に配置することができるようになります。
豊かに引きこもる。
Webデザインは器。ブログは中身。
「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
おウチで豊かに楽しく暮らす方法をご紹介しています。
positionプロパティの書き方
positionはcssのプロパティです。
以下、代表的な値です。
・relative
・absolute
・fixed
・sticky
・static
/* positionの代表的なバリエーション */
div{ position: relative; }
div{ position: absolute; }
div{ position: fixed; }
div{ position: sticky; }
div{ position: static; }
positionのバリエーション
position:relative
relativeは「相対的な」という意味です。
position:relativeを使うと、要素の本来の位置を基準として、相対的に要素の配置位置を決めることができます。
サンプル
ペンタを配置しています。
左は通常配置されるべき配置、右はposition:relativeを使って、通常配置を基準に、上から50px、左から20px要素をズラした例です。
右には以下のCSSが実装されています。
img{
position: relative;
top: 50px;
left: 20px;
}
まず、position: relativeで相対指定が使えるようにしています。
続いて、本来の位置からどのくらい動かすか、移動量をtopとleftプロパティで設定しています。
topとleftの他に、bottomとrightも使えます。
position:absolute
absoluteは「絶対的な」という意味です。
position:absoluteを使うと、ブラウザの左上を基準として要素の配置位置を決めることができます。
サンプル
以下は、ブラウザサイズを基準として、要素を右下に絶対配置した例です。
img{
position: absolute;
bottom: 0;
right: 0;
}
実装すると、こんなイメージになります。
position:fixed
fixedは「固定した」という意味です。
position:fixedを使うと、ブラウザの左上を基準として要素の配置位置を決めることができます。
absoluteとの違いは、ブラウザのスクロールに追従しない点です。
ナビゲーションを定位置に固定するのによく使われていますね。
サンプル
以下は、ブラウザの右下に要素を固定配置した例です。
img{
position: fixed;
bottom: 0;
right: 0;
}
こんなイメージになります。
position:sticky
stickyは「粘着性がある（くっつく）」という意味です。
position:stickyを使うと、画面をスクロールしても要素が任意の範囲内で留まってくれます。
サンプル
以下は、img要素に対して適用した例です。
img{
position: sticky;
top: 0;
}
ブラウザが基準の場合は、こんなイメージになります。
stickyを使う際の注意点は、親要素の範囲で機能するということです。
サンプル
以下は枠線のついた親要素の中に、子要素としてペンタの画像が入っています。
ペンタにはposition:stickyが設定されていますが、画面をスクロールしてみると、親要素の中でstickyが実行されていることがわかります。
親要素自体がブラウザの表示から外れちゃうと、ペンタも一緒に消えちゃうんですね。
先ほど「ブラウザが基準の場合は」というまどろっこしい表現を使いましたが、ブラウザの上端で要素を留めたい場合は、bodyが親要素である必要があります。
<!-- bodyを親要素にすれば、ブラウザ上部でひっつきます -->
<body>
<img style="position:sticky; top:0;" />
</body>
<!-- この場合は、親であるdiv要素の上部でひっつきます -->
<body>
<div>
<img style="position:sticky; top:0;" />
</div>
</body>
position:stickyを使いこなすには、コードの構造を工夫しておく必要があります。
position:static
staticは「静止した」という意味です。
position:staticはデフォルト値で、要素にposition設定を何も行っていない状態と同義です。
サンプル
レスポンシブの事情等で施した各種position設定を、素の状態にリセットしたい時に便利です。
img{
position: absolute;
top: 0;
right: 0;
}
@media screen and (min-width:1000px) {
position: static;
}
デフォルト状態なので、top、right等は機能しなくなります。
positionの合わせ技
スクールで最も質問が多いのがココです。
先程、position:absoluteはブラウザを基準にした配置と書きましたが、
親要素にposition:relative等を設定すると、親要素を基準にした配置設定をすることができます。
サンプル
以下は、親であるdiv要素の右下にimg要素を配置した例です。
/* 親要素にrelative */
div{
position: relative;
}
/* 子要素にabsolute */
img{
position: absolute;
bottom: 0;
right: 0;
}
先ほど紹介したブラウザ基準による設定方法と比べ、親要素を基準としたこちらの実装の方が扱いやすい場合も多いです。
デザインに応じて上手に使い分けたいですね。
親要素に関しては、position: relativeの他に、absoluteやfixed、stickyを使っても同様に機能します。
ただこれらを実装すると親要素自体が移動してしまう場合が多いので、relativeがオススメです。
まとめ
- position:relative：要素本来の位置を基準とした相対配置
- position:absolute：ブラウザを基準とした絶対配置
- position:fixed：ブラウザを基準とした固定配置
- position:sticky：親要素内に要素を留める配置
- position:static： 何も設定されてない状態。デフォルト値
- 親要素にrelative、子要素にabsolute：親要素を基準に子要素の位置が決められる
position自体は昔からあるCSSプロパティなんですが、いまだに質問が多いですね。
それぞれの特性を理解して適所で上手に使ってあげると、要素を自由に配置する事が可能になるので、デザインの表現の幅が広がります。
