CSS Positionプロパティを使用してWebページに要素を配置する

かもしれません 3, 2024

カスケードスタイルシートを使用する前は、Webページ上のオブジェクトの位置を制御できませんでした。 HTMLテーブルを使用して位置をわずかに制御できますが、これはあまり正確ではありませんでした。 CSSを使用すると、各要素をWebページに配置する方法を正確に制御できます。

CSSのpositionプロパティを使用してWebページに要素を配置する前に、Webブラウザーとの通信に使用される用語について説明する必要があります。 CSSは、Webページの幅と高さだけでなく、Webブラウザーのサイズも考慮します。

ブラウザの幅と高さ
最初は、これは開いているブラウザウィンドウを指していると思うかもしれません。しかし、実際にはコントロールとボタンを含むブラウザ全体を指します。
ライブの幅と高さ
これは、ブラウザの表示領域の用語です。コントロールは含まれません。
ドキュメントの幅と高さ
これは、ウェブページの幅と高さ全体です。これらの寸法がライブの幅と高さよりも大きい場合、ブラウザは必要に応じてスクロールバーを表示します。

CSSを使用してWebページの各部分を配置できる境界の用語がわかったので、4つの位置の値を見てみましょう。

静的
これがデフォルトです。要素に別の方法を指定しない限り、ブラウザは静的配置を使用します。聞こえるように、静的配置では、Webページ上の要素の位置を変更することはできません。それでは、ブラウザは各オブジェクトをWebページのどこに配置するかをどのように決定しますか？ HTMLコードで発生する順序で各要素を配置します。ロゴ画像、敬称、そして著作権表示をHTMLで持っている場合、ブラウザはこれらをこの順序でWebページに配置します。挨拶文をロゴ画像の上に移動することはできません。
相対的
相対配置は、HTMLコード内の要素の順序がページ上の要素のフローを制御するという点で、静的と同じように機能します。ただし、相対配置を使用して、Webページ上の他の要素に対する要素の位置を制御できます。
絶対の
要素で絶対配置を使用すると、その要素はWebページの他の部分から独立します。配置はHTMLの順序によって決定されないため、X座標とY座標を使用して要素を配置する必要があります。
修繕
これは、絶対位置決めと同じように機能します。ただし、位置が固定されている要素はWebページでスクロールしません。これは、ページが上にスクロールしても表示されたままにするロゴまたはメニューに使用する便利な機能です。