ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

CSS position, absoluteとrelativeの違いがページを大きく崩す

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

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:  移動元の領域は残る
前の投稿
CSS q, blockquote, 引用をカスタマイズする方法
かんたんCSS margin, padding, 余白の設定とボーダーとの関係
次の投稿

HTML&CSSの本

post-cta-image

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

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

コメントを残す

*