CSS レイアウト – positionプロパティ

positionプロパティは、要素の位置決め方法（static、relative、fixed、absolute、stickyのいずれか）を指定します。

positionプロパティ

positionプロパティは、要素の位置決め方法を指定します。5つの異なるposition値があります：

• static
• relative
• fixed
• absolute
• sticky

その後、top、bottom、left、およびrightプロパティを使用して要素を位置決めします。ただし、これらのプロパティは、最初にpositionプロパティが設定されていないと機能しません。また、positionの値によって動作が異なります。

position: static;

HTML要素はデフォルトでstaticに位置決めされます。staticに位置決めされた要素は、top、bottom、left、およびrightプロパティの影響を受けません。

position: static; を持つ要素は特別な方法で位置決めされることはなく、常にページの通常のフローに従って位置決めされます：

この <div> 要素はposition: static;を持っています。

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

position: relative;

position: relative; を持つ要素は、その通常の位置に対して相対的に位置決めされます。相対位置にある要素のtop、right、bottom、およびleftプロパティを設定すると、通常の位置から離れて調整されます。他のコンテンツは、その要素によって残された隙間に合わせて調整されることはありません。

この <div> 要素はposition: relative;を持っています。

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;
}

この <div> 要素はposition: fixed;を持っています。

position: absolute;

position: absolute; を持つ要素は、最も近い位置指定された先祖に対して相対的に位置決めされます（fixedのようにビューポートに対してではなく）。

絶対位置にある要素は通常のフローから外され、他の要素と重なることがあります。以下は簡単な例です：

この <div> 要素はposition: relative;を持っています。この <div> 要素はposition: absolute;を持っています。

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; を持つ要素は、ユーザーのスクロール位置に基づいて位置決めされます。stickyな要素は、スクロール位置に応じて相対的と固定的の間で切り替わります。ビューポートで指定されたオフセット位置に達するまで相対的に位置決めされ、その後は固定的に「張り付く」（position:fixedのように）します。

この例では、stickyな要素がページの上部に張り付きます（top: 0）、スクロール位置に達したときに固定されます。

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

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

Property	Description
bottom	位置指定されたボックスの下端のマージンを設定します
clip	絶対位置にある要素をクリップします
left	位置指定されたボックスの左端のマージンを設定します
position	要素の位置決めの種類を指定します
right	位置指定されたボックスの右端のマージンを設定します
top	位置指定されたボックスの上端のマージンを設定します