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

  • -

    シェア
  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
us us
css3 image

Webコンテンツの位置を変更するため、CSSでは必ず使うpositionプロパティ。しかし、absoluteとrelativeを『絶対・相対位置を指定する』という知識だけだと、ページの表示内容を大きく崩すことがあります。

それを防ぐためにpositionプロパティの元々持っている挙動についてご紹介します。

positionプロパティとは?

positionプロパティは、HTMLの要素の位置を変更するタイプを指定します。positionプロパティを使うと、top, bottom, left, rightプロパティの値が有効になります。

これら4つのプロパティで変更する要素の位置を指定し、positionプロパティを設定しないと無効になります。positionプロパティではタイプを指定するだけで位置の変更はできません。

positionプロパティに指定できる値は次の4つです。

static

初期値です。top, bottom, left, rightの値を指定しても無効になります。

これを使うことはほとんどありません。positionプロパティが未指定の時と意味が同じだからです。

コンテンツをデフォルトの位置へ戻すときなどに使います。

relative

top, bottom, left, rightプロパティに相対位置を指定するときに使います。元々のHTMLの要素の位置(static)が基準になります。

absolute

top, bottom, left, rightプロパティに絶対位置を指定するときに使います。親の要素のpositionプロパティの値によって基準位置が変わります。

  • 親要素のpositionプロパティがstatic以外: 親要素
  • 親要素のpositionプロパティを設定しない(static): ウィンドウ全体

が基準位置になります。

fixed

基準位置はabsoluteと同じです。absoluteとの違いは、スクロールしても位置が固定されたままになるところです。Webページの下によくみられる、ページのトップへ移動するボタンなどに使われます。

sticky

CSS3から追加された新しいプロパティです。fixedと同じようにコンポーネントの追尾で使います。

基準位置は親の要素です。fixedとの違いは、親の要素の中でしか位置が固定にならないところです。

親の要素が、スクロールで画面から消えるとstickyのコンポーネントは追いかけてきません。

いまのところ説明できるのはここまでで、いろいろなところの説明を見ても、分かるような分からないような感じです。

自分で動かしてみても、まだ正確な動きを把握していません。検証が終わったら内容を更新します。

absoluteはWebページ全体が大きく崩れるので注意!

relativeとabsoluteの違いは、相対・絶対位置を指定するということだけではありません。Webページに表示したときに決定的な違いがあります。まずはabsoluteのサンプルを見てみましょう。

absoluteのサンプル

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

サンプルを見ると、親要素のpositionプロパティの値で、基準位置が変わるのが分かります。ここで注意することは、absoluteの場合は元の位置の領域が消えることです。

absoluteでは、要素が完全に移動してほかの要素から浮き上がった状態になります。元の領域は消えたので、移動した要素の下にある要素(parent end)は、消えた要素の分だけ上にずれます。

また、親要素にstaticを指定した場合、コンテンツが大きく移動しています。これは、親要素の位置が未指定なので、子要素は、ページ全体のウィンドウの基準からの位置まで移動します。

これを親要素の中に限定して移動させるには、.parent2にrelativeを指定するように、親要素にstatic以外を指定します。

.parent2は、absoluteにしても結果は同じです。この値は、親要素の位置の指定方法を設定しているだけなので、子要素には関係ないと思われがちですが、static以外を指定すると子要素にも影響します。ここで親要素を移動させると、それに連動して子要素も移動します。

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

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

relativeのサンプル

ここで注目することは、relativeの場合は、元の位置の領域がそのまま残ります。relativeの基準位置は元の位置なので、元の領域を消すことができません。消してしまうと基準位置が分からなくなるからです。relativeでは移動元の領域が残るので、ほかの要素に影響を与えることはありません。

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

まとめ

absoluteとrelativeでは元の領域が残るかどうかの違いがあります。これを知っていないと、意図しない位置にコンテンツが移動して、Webページ全体を崩すことがあります。positionプロパティにはこのような動きがあることを知っておきましょう。

  • absolute: 移動元の領域は消える
  • relative:  移動元の領域は残る

 

最近Webカテゴリでよく読まれている記事です。
post-cta-image
blog image

ドメイン取得の意味が分からない人へ。王道の方法を紹介します。

ドメインの登録業者を選ぶのに悩む必要はないです。サイトを簡単に早く公開するには全くいらないことで、むしろ邪魔です。『お名前.com』というサービスは必ず耳にします。そのお名前.comのメリットとデメリットと一緒に、ドメインの意味が分からない人が一番失敗しないドメインの取得方法を紹介します。

tadtadya.com

_

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

*

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

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