Webコンテンツの位置を変更するため、CSSでは必ず使うpositionプロパティ。
しかし、absoluteとrelativeを『絶対・相対位置を指定する』という知識だけだと、ページの表示内容を大きく崩すことがあります。
それを防ぐためにpositionプロパティの元々もっている挙動についてご紹介します。
positionプロパティとは？
positionプロパティは『HTMLの要素の位置を変更するタイプを指定』します。positionプロパティを使うと次のプロパティの値が有効になります。
top
bottom
left
right
4つのプロパティで要素の位置を指定しても、positionプロパティを設定しないと無効になります。
positionプロパティはタイプを指定するだけで位置の変更はできません。
positionプロパティの値をひとつひとつ見ていきましょう。
static
初期値です。
top, bottom, left, rightの値は無効です。
（指定しても意味がない。）
これを使うことはほとんどありません。positionプロパティが未指定のときと同じだから。
コンテンツをデフォルトの位置へ戻すときなどに使います。
relative
相対位置を指定します。HTMLの要素の元の位置が基準です。
staticが基準
top, bottom, left, rightプロパティの値は元の位置からの距離。
absolute
絶対位置を指定します。親要素のpositionプロパティの値で基準が変わることに注意。
| 条件 | 基準 |
|---|---|
| 親要素のpositionプロパティがstatic以外 | 親要素 |
| 親要素のpositionプロパティを設定しない （static） | ページ全体 |
親要素、ページ全体のどちらであっても基準位置はそのコンポーネントの左上。
fixed
基準はabsoluteと同じです。absoluteとのちがいは、スクロールしても位置が固定されたままになるところ。
コンポーネントの追尾
Webページの下によく見られる、ページのトップへ移動するボタンなどに使われます。
sticky
CSS3から追加された新しい値です。fixedと同じようにコンポーネントの追尾で使います。
基準位置は親の要素です。fixedとのちがいは親の要素の中だけで位置が固定になるところ。
親の要素がスクロールで画面から消えると、stickyのコンポーネントは追いかけてきません。
いまのところ説明できるのはここまでで、いろんなところの説明を見ても、分かるような分からないようなところがあります。
自分で動かしてみても、まだ気になる点があります。検証が終わったら内容を更新します。
absoluteはWebページ全体が大きく崩れるので注意！
relativeとabsoluteのちがいは、相対・絶対位置を指定するだけではありません。
Webページに表示したときに決定的にちがいます。まずはabsoluteのサンプルを見てみましょう。
absoluteのサンプル
See the Pen sample - CSS position absolute - by tadtadya (@tadtadya) on CodePen.
親要素のpositionプロパティの値で、基準位置が変わり、親要素がstaticのときコンテンツが大きく移動しています。基準がページ全体の左上だから。
これを親要素を基準に移動させるには、.parent2のrelativeのようにstatic以外を使います。
.parent2をabsoluteにしても結果は同じ。
親要素のについての話なので子要素には関係ないと思われがちですが、親要素でstatic以外を指定すると子要素にも影響します。
ここで親要素を移動させると、それに連動して子要素も移動します。
元の領域は消える
ここで注目なのは、absoluteのとき元の位置の領域が消えること。
absoluteは、要素が完全に移動してほかの要素から浮き上がります。元の領域は消えたので、"parent end"は消えた要素の分だけ上にずれます。
次にrelativeのサンプルを見てみましょう。
- absoluteは移動元の領域が消える
- まわりのコンテンツの位置はその分ズレる
relativeのサンプル
See the Pen sample - CSS position relative - by tadtadya (@tadtadya) on CodePen.
ここで注目することは、relativeのとき元の位置の領域がそのまま残ること。
relativeの基準が元の位置なので、元の領域を消すことができません。消してしまうと基準位置が分からなくなるからです。
移動元の領域が残るので、ほかの要素に影響を与えることはありません。
- relativeは移動元の領域は残る
- まわりのコンテンツの位置は影響されない
まとめ
absoluteとrelativeは元の領域が残るかどうかの違いがある。
これを知っていないと、意図しないところにコンテンツが移動して、Webページ全体を崩すことがあります。
positionプロパティにはこのような動きがあることを知っておきましょう。
- absolute: 移動元の領域は消える
- relative: 移動元の領域は残る
