CSS position: absoluteとrelativeの違いでページが大きく崩れる

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
css3 image
イラストACの画像をもとに加工しています。

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のサンプル

『Run Pen』を押すと、今回のソースコードサンプルが表示されます。

親要素のpositionプロパティの値で、基準位置が変わっています。

親要素がstaticのときコンテンツが大きく移動しています。基準がページ全体の左上だからです。

これを親要素を基準に移動させるには、.parent2のrelativeのようにstatic以外をつかいます。

.parent2をabsoluteにしても結果は同じです。

親要素の位置の指定方法を指定しているので、子要素には関係ないと思われがちですが、static以外を指定すると子要素にも影響します。

ここで親要素を移動させると、それに連動して子要素も移動します。

元の領域は消える

ここで注目なのは、absoluteのとき

元の位置の領域が消える

ことです。

absoluteは、要素が完全に移動してほかの要素から浮き上がります。元の領域は消えたので、"parent end"は消えた要素の分だけ上にずれます。

次にrelativeのサンプルを見てみましょう。

  • absoluteは移動元の領域は消える
  • まわりのコンテンツの位置はその分ズレる

relativeのサンプル

ここで注目することは、relativeのとき

元の位置の領域がそのまま残る

ことです。

relativeの基準位置は元の位置なので、元の領域を消すことができません。消してしまうと基準位置が分からなくなるからです。

移動元の領域が残るので、ほかの要素に影響を与えることはありません。

  • relativeは移動元の領域は残る
  • まわりのコンテンツの位置は影響されない

まとめ

absoluteとrelativeは元の領域が残るかどうかのちがいがある。

これを知っていないと、意図しないところにコンテンツが移動して、Webページ全体を崩すことがあります。

positionプロパティにはこのような動きがあることを知っておきましょう。

  • absolute: 移動元の領域は消える
  • relative:  移動元の領域は残る
HTML&CSSの本
post-cta-image

どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。


HTML&CSSの本2選

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

top
この記事を気に入ったらぜひシェアも!!