CSS位置相対および絶対を使用するための実用的なガイド

序章

この記事では、CSSの使用方法を学びます position: relative と position: absolute 十分な量のデモと学習支援を通じて。

CSS position やや予想外のことができるため、高度なトピックと見なされることもあります。 ええと、「専門家」があなたのCSS能力の卓越性を追求することからあなたを脅かさないでください！ 基礎となるアイデアのいくつかを身に付ければ、これは非常にアクセスしやすいトピックです。

レンダリングフロー

相対/絶対ポジショニングを理解するための重要な概念は、レンダリングフローです。

一般的な考え方は、HTML要素はすべてある程度のスペースを占めるというものです。 ブラウザのレンダリングエンジンは、すべてをグリッドのように常にレンダリングします。左上隅から始まり、すべてのHTMLコンテンツの配置が完了するまで、右下に向かって順番に移動します。

インターネット接続が遅いことがあり、Webページ上の大きなものがすべてを右下に押すのを見ていた場合、それは本質的に「レンダリングフロー」の動作です。

CSSを使用してこのデフォルトの動作を変更できます position.

CSSの位置

CSS position 直感的ではないため、高度なスキルと見なされることもあります font-size また margin、など、ブラウザの自然な「レンダリングフロー」を変更するためです。

これらはCSSの可能な値です position:

.foo {
  position: static;
  /* position: relative;
  position: absolute;
  position: sticky;
  position: fixed; */
}

今日はただ見ていきます position: absolute と position: relative 彼らはおそらくあなたがそれらに自信を持ったらあなたに多くのマイレージを得るであろう最も用途の広いものだからです。

相対ポジショニング

HTML要素を作成するとき position: relative、レイアウトの「フロー内」に残りますが、移動できます。

.green-square {
  position: relative;
  top: 25px;
  left: 25px;
  /* ... */
}

一緒に position: relative 通常、を定義する必要があります top, right, bottom、 また left オフセット。

「相対的な」位置は、「最初に配置された場所に対する相対的な」と考えることができます。 この場合、緑色の正方形は 25px from the left、 と 25px from the top それが最初にあった場所の。

また、その幅と高さが正方形のグリッドに保持されていることも注目に値します。 つまり、それはまだレイアウトの「流れの中で」と見なされているということです…ちょっと微調整されただけです。

絶対測位

絶対配置は、HTML要素を移動するための非常に強力なCSSルールです。 予期しない結果が生じることがあります。

.orange-square {
  position: absolute;
  top: 0px;
  left: 0px;
  /* ... */
}

オレンジ色の正方形は、実際にはこれらの25個の正方形（グリッドの中央にある正方形）の13番目ですが、最後の正方形のように見えます。 変。 使用する position: absolute 要素を「流れから外れる」ようにして、グリッドスペースが折りたたまれます。

ええ、でもなぜそこまでずっとなの？！

発信元の座標

オレンジ色の正方形は、0x、0y座標（例：左上隅）に配置されます。 ブラウザのレンダリングが常に左上隅から始まる方法、 position: absolute 要素はそれをレンダリングの原点としても使用します。 使用できます top/right/bottom/left そこからオフセットするプロパティ。

ただし、元の座標を変えることもできます…

.grid {
  position: relative;
}
.orange-square {
  position: absolute;
  top: 0px;
  left: 0px;
  /* ... */
}

上記の例では、親要素（div.grid）があります position: relative オレンジ色の正方形がそれをレンダリングの原点として使用するルール。

これは直感的でない動作に見えるかもしれませんが、実際には意図的なものです。 これを許可すると、HTML要素を配置する場所/方法を細かく制御できます…

結論

使い始めたら position: relative と position: absolute それはデザインの可能性の新しい世界を開きます。 階層化された視覚要素を作成し、ブラウザーがどのようにレンダリングされるかについて深い自信を感じることができるため、細心の注意を払って設計した視覚要素を配置できます。