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

序章

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

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

レンダリングフロー

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

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

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

このデフォルトの動作は、CSSpositionを使用して変更できます。

CSSの位置

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

CSSpositionで可能な値は次のとおりです。

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

CSS positionの詳細については、 Mozilla DeveloperNetworkをご覧ください。