序章

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

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

レンダリングフロー

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

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

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

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

CSSの位置

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

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

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

今日は、position: absoluteposition: relativeを見ていきます。これらはおそらく、自信を持って多くのマイレージを獲得できる最も用途の広いものだからです。

相対ポジショニング

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

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

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

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