CSSのpositionプロパティを使用して要素を整列する方法

Web開発でCSSを使用して要素を配置することは、思ったほど簡単ではありません。プロジェクトが大きくなると、事態はすぐに複雑になる可能性があり、CSSがHTML要素の整列をどのように処理するかを十分に理解していないと、整列の問題を修正できません。

純粋なCSSで要素を配置するためのさまざまな方法/方法があります。CSS floatを使用する場合、displayプロパティとpositionプロパティが最も一般的な方法です。

この記事では、要素を純粋なCSSに揃えるための最も紛らわしい方法の1つであるpositionプロパティについて説明します。ここにCSS表示プロパティの別のチュートリアルもあります。

必要に応じて、CSSポジショニングチュートリアルのビデオバージョンを見ることができます。

さぁ、始めよう...

CSSの位置とヘルパーのプロパティ

したがって、Positionプロパティには5つの主要な値があります

position: static | relative | absolute | fixed | sticky

要素の座標を設定するための追加のプロパティ(私はそれらを「ヘルパープロパティ」と呼びます):

top | right | bottom | left そしてその z-index

重要な注意ヘルパープロパティは、位置が宣言されていない場合、または位置が静的である場合は機能しません

このz-indexは何ですか?

高さと幅(x、y)は2次元です。Zは3次元です。Webページ内の要素は、そのz-index値が増加するにつれて他の要素の前に表示されます。

Z-indexposition: static、宣言された位置の有無にかかわらず機能しません。

私のチャンネルのビデオを見て、z-indexの使用方法を詳しく見ることができます。

それでは、positionプロパティ値に移りましょう...

1.静的

position: staticあるデフォルト値は。宣言するかどうかに関係なく、要素はWebページ上で通常の順序で配置されます。例を挙げましょう:

まず、HTML構造を定義します。

次に、2つのボックスを作成し、それらの幅、高さ、および位置を定義します。

.box-orange { // without any position declaration background: orange; height: 100px; width: 100px; } .box-blue { background: lightskyblue; height: 100px; width: 100px; position: static; // Declared as static }

写真でわかるように、位置を定義する:静的かどうかは何の違いもありません。ボックスは、通常のドキュメントフローに従って配置されます。

2.相対

position: relative通常の位置に対する要素の新しい位置。

position: relativeすべての非静的位置から開始し、値については、前述のヘルパープロパティを使用して、要素のデフォルトの位置を変更できます

青いボックスの横にあるオレンジ色のボックスを移動してみましょう。

.box-orange { position: relative; // We are now ready to move the element background: orange; width: 100px; height: 100px; top: 100px; // 100px from top relative to its old position left: 100px; // 100px from left }
注:位置の使用要素の相対位置。他の要素の位置には影響しません。

3.絶対

ではposition: relative、要素はそれ自体を基準にして配置されます。しかし、絶対的なLY配置された要素は、その親を基準にしています。

の要素position: absoluteは、通常のドキュメントフローから削除されます。親要素の開始点(左上隅)に自動的に配置されます。親要素がない場合、最初のドキュメントがその親になります。

position: absoluteドキュメントフローから要素を削除するため、他の要素が影響を受け、要素がWebページから完全に削除されたときに動作します。

親要素としてコンテナを追加しましょう:

.box-orange { position: absolute; background: orange; width: 100px; height: 100px; }

青いボックスが消えたように見えますが、消えていません。青いボックスはオレンジ色のボックスが削除されたように動作するため、オレンジ色のボックスの場所に移動します。

オレンジ色のボックスを5ピクセル移動してみましょう。

.box-orange { position: absolute; background: orange; width: 100px; height: 100px; left: 5px; top: 5px; }

The coordinates of an absolute positioned element are relative to its parent if the parent also has a non-static position. Otherwise, helper properties position the element relative to the initial .

.container { position: relative; background: lightgray; } .box-orange { position: absolute; background: orange; width: 100px; height: 100px; right: 5px; // 5px relative to the most-right of parent }

4. Fixed

Like position: absolute, fixed positioned elements are also removed from the normal document flow. The differences are:

  • They are only relative to the document, not any other parents.
  • They are not affected by scrolling.
.container { position: relative; background: lightgray; } .box-orange { position: fixed; background: orange; width: 100px; height: 100px; right: 5px; // 5px relative to the most-right of parent }

Here in the example, I change the orange box’s position to fixed, and this time it is relative 5px to the right of the , not its parent (container):

As we can see, scrolling the page doesn’t affect the fixed positioned box. It is not relative to its parent (container) anymore.

5. Sticky

position: sticky can be explained as a mix of position: relative and position: fixed.

It behaves until a declared point like position: relative, after that it changes its behavior to position: fixed . The best way to explain position: sticky is by an example:

IMPORTANT: Position Sticky is not supported in Internet Explorer and earlier versions of other browsers. You can check the browser support at caniuse.com.

The best way to understand the CSS Position Property is by practice. Keep coding until you have a better understanding. If something is not clear, I will answer your questions below in the comments section.

If you want to learn more about web development, feel free to follow me on Youtube!

Thank you for reading!