【CSS】 absoluteなどのpositionの動きを把握しよう
CSSでは、relativeとabsoluteを組み合わせた要素の重ね合わせ、fixedを用いた画面上の固定表示など、位置を操作できます。最もよく利用するのはrelativeとabsoluteの組み合わせです。
近年追加されたstickyの動きについても見ていきましょう!
positionの種類
positionには5種類あります。
| 値 | 動作 |
|---|---|
static | 要素は通常通り配置されます。top, left, bottom, right, z-indexは無視されます。 |
relative | 要素は通常通り配置されます。この要素自体にtop, left, bottom, rightを設定すると、その分だけこの要素が移動します。 |
absolute | 要素は普通の配置から外れます。つまり、他の要素はこの要素が無いものとして配置されます。また、兄弟要素にabsoluteでない要素がある場合、それより上に表示されます。right等が指定された場合、祖先の要素のうち最も近いrelativeが指定された要素基準で、指定した数値の座標に配置されます。 |
fixed | 画面上の固定位置に表示されます。スクロールしても場所は変わりません。また、他の要素はこの要素が無いものとして配置されます。 |
sticky | スクロールした時、親要素の範囲内でright等が指定された座標に表示されます。 |
stickyは少々複雑なので、まずは他から見ていきましょう。
static
これは普通に配置されるもので、デフォルトはこれです。
left等は無視されます。
See the Pen Untitled by Totori (@souki202) on CodePen.
relative
staticのように普通に配置されますが、leftなどで場所を動かせます。
場所を動かした場合、動かす前の場所基準で他の兄弟要素が配置されます。
See the Pen css position relative by Totori (@souki202) on CodePen.
absolute
親や祖先の要素のうち、relativeを指定しているものがあれば、その要素の左上を基準として配置されます。移動する場合はright等を用います。z-indexも適用されます。
ここで、兄弟要素の位置は、この要素が無いものとして配置されます。同時に、親要素の大きさに影響しません。
bottom: xx;と指定した場合、要素の下側が祖先のrelativeな要素の下側と接します。right: xx;と指定した場合も同様に、祖先のrelativeな要素の右側と接します。
もしrelativeな要素が祖先にない場合はbody基準になりますが、殆どはrelativeと組み合わせると思います。
See the Pen css position absolute by Totori (@souki202) on CodePen.
- HTMLを見ると
bbbはabsolute bottom...と書かれている要素より後に書かれていますが、実際の配置は手前のabsoluteな要素を無視した配置になっています。また、bottomとrightは、親のrelativeな要素の右下とabsoluteが基準になっていますね。 top,left,bottom,right全て0、大きさをautoとすると、親要素全体に広がっていることが分かります。大きさをpxなどで指定するとうまく広がらないので注意しましょう。relativeな要素の子にrelativeな要素があり、その子にabsoluteとなっています。この場合、absoluteな要素は、祖先で最も近いrelative基準で配置されていますね。relativeとabsoluteを組み合わせて中央揃えにする典型的な方法です。要素の左上を親要素の中心に持ってきた後、transform: position(...)でabsoluteな要素の縦横半分だけ逆に移動することで中央に持ってきています。- 親要素は
staticで、その親がrelativeなパターンです。staticなものは無視され、親の親にあるrelative基準に配置されています。
また、下の例のように、画像と重ねるパターンはよくあります。(CardTextの部分がabsolute)
See the Pen css position absolute2 by Totori (@souki202) on CodePen.
この例だと、画像とCardTextが兄弟要素として並んでいます。その親がrelativeの指定ですね。画像は普通にstaticで配置で良いですが、そこに重ねるため、CardTextをabsoluteにして要素が重なるようにしています。absoluteにすると、親要素のサイズに影響を与えなくなるということも重要なポイントです。
fixed
画面上の特定位置に表示されます。位置は、left等で指定します。
兄弟要素は、fixedな要素を無視した場所に配置されます。親要素の大きさにも影響しません。
See the Pen css position fixed by Totori (@souki202) on CodePen.
sticky
最近実装された値です。スクロールして要素がはみ出た時、親要素からはみ出ない範囲で固定位置に表示されます。つまり、普段はstaticの挙動、スクロールすると、topやbottomで指定した場所より外に行かないように固定表示、ただしそれは親要素の範囲に収まる場所、ということです。
stickyな要素の親要素は自動的にスティッキーコンテナとなり、stickyな要素はそこからはみ出ないように表示されます。
See the Pen css position sticky by Totori (@souki202) on CodePen.
縦スクロールの場合はtopとbottomが、横スクロールの場合はleftとrightが効きます。
上の例でスクロールすると、headerがついてきますね。しかし、下の方までスクロールするとついてこなくなります。これは、固定表示するとスティッキーコンテナからはみ出てしまうためです。stickyな要素は、親要素からはみ出ない範囲でしか移動しません。
まとめ
特にrelativeとabsoluteを組み合わせた挙動は頻出します。画像の上にテキストを重ねるなど、要素を重ね合わせる場合に極めてよく使用します。
stickyは親要素の範囲からは出ないため、もし利用する場合は親要素の構成を考える必要があります。
複雑なレイアウトを組むにはpositionの理解は重要です。どのように配置されるか把握しましょう!
