CSS position

position 属性は、要素に適用される配置方法のタイプ (static、relative、fixed、absolute、sticky) を指定します。

position 属性

position 属性は、要素に適用される位置決め方法のタイプを指定します。

5 つの異なる位置の値があります:

• static
• relative
• fixed
• absolute
• sticky

要素は、実際には、top、bottom、left、right 属性を使用して配置されます。 ただし、これらのプロパティは、position プロパティが最初に設定されない限り、効果がありません。 位置の値に応じて動作が異なります。

position: static;

HTML 要素は、デフォルトでは static (静的) に配置されます。

静的に配置された要素は、top、bottom、left、および Right 属性の影響を受けません。

position: static; 要素は特別な方法で配置されるのではなく、常にページの通常のフローに従って配置されます。

これは使用される CSS です:

例

div.static {
  position: static;
  border: 3px solid #73AD21;
}

自分で試してみてください

position: relative;

position:relative; 要素は、通常の位置を基準にして配置されます。

相対的に配置された要素に top、right、bottom、および left 属性を設定すると、要素は通常の位置から調整されます。 コンテンツの残りの部分は、要素によって残されたスペースに合わせて調整されません。

これは使用される CSS です:

例

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

自分で試してみてください

position: fixed;

position:fixed; 要素はビューポートを基準にして配置されます。つまり、ページがスクロールされても要素は常に同じ位置にあります。 この要素を配置するには、top、right、bottom、および left プロパティを使用します。

固定位置の要素は、ページ上の通常配置される場所に隙間を残しません。

ページの右下隅にあるこの固定要素に注目してください。 使用される CSS は次のとおりです。

例

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

自分で試してみてください

position: absolute;

position:absolute; 要素は、(fixed のようにビューポートを基準とするのではなく) 最も近い位置にある祖先要素を基準にして配置されます。

ただし、絶対配置要素に祖先がない場合は、ドキュメント本文を使用し、ページのスクロールとともに移動します。

注: 「位置指定された」要素とは、位置が static ではない要素です。

簡単な例を次に示します。

これは使用される CSS です:

例

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

自分で試してみてください

position: sticky;

position: sticky; 要素は、ユーザーのスクロール位置に従って配置されます。

スティッキー要素は、スクロール位置に基づいて相対 (relative) と固定 (fixed) の間で切り替わります。 最初に、ビューポート内で指定されたオフセットに遭遇するまで相対的に配置されます。その後、所定の位置に「貼り付けられます」(例:position:fixed)。

注: Internet Explorer、Edge 15、およびそれ以前のバージョンは、固定配置をサポートしていません。 Safari には -webkit- プレフィックスが必要です (以下の例を参照)。 固定配置を機能させるには、top、right、bottom、または left の少なくとも 1 つを指定する必要もあります。

この例では、スクロール位置に到達すると、スティッキー要素はページの先頭 (top: 0) に留まります。

例

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

自分で試してみてください

重複する要素

要素を配置する場合、他の要素と重なることがあります。

z-index 属性は、要素の積み重ね順序 (どの要素を他の要素の前または後ろに配置するか) を指定します。

要素には正または負の積み重ね順序を指定できます。

これはタイトルです

画像の z-index が -1 であるため、テキストの後ろに配置されます。

例

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

自分で試してみてください

スタック順序が高い要素は常に、スタック順序が低いエレメントよりも前にあります。

注: z-index を指定せずに配置された 2 つの要素が重なる場合、HTML コードの最後の要素が一番上に表示されます。

画像内のテキストの配置

画像上にテキストを配置する方法:

例

Bottom Left

Top Left

Top Right

Bottom Right

Centered

自分で試してみてください:

Top Left Top Right Bottom Left Bottom Right Centered

すべての CSS 位置決めプロパティ