CSSレイアウト-位置プロパティ
このpositionプロパティは、要素に使用される配置方法のタイプ（静的、相対、固定、絶対、またはスティッキー）を指定します。
位置プロパティ
このpositionプロパティは、要素に使用される配置方法のタイプを指定します。
5つの異なる位置値があります。
staticrelativefixedabsolutesticky
次に、top、bottom、left、およびrightプロパティを使用して要素が配置されます。ただし、これらのプロパティは、position
プロパティを最初に設定しない限り機能しません。また、位置の値によって動作が異なります。
位置：静的;
HTML要素はデフォルトで静的に配置されます。
静的に配置された要素は、top、bottom、left、およびrightのプロパティの影響を受けません。
の要素position: static;は特別な方法で配置されません。それは常にページの通常の流れに従って配置されます：
使用されるCSSは次のとおりです。
例
div.static {
position: static;
border: 3px solid #73AD21;
}
位置：相対;
の要素position: relative;は、通常の位置を基準にして配置されます。
比較的配置された要素のtop、right、bottom、およびleftプロパティを設定すると、通常の位置から離れて調整されます。他のコンテンツは、要素によって残されたギャップに収まるように調整されません。
使用されるCSSは次のとおりです。
例
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
位置：固定;
の要素position: fixed;はビューポートを基準にして配置されます。つまり、ページがスクロールされても常に同じ場所にとどまります。top、right、bottom、およびleftプロパティは、要素を配置するために使用されます。
固定要素は、通常配置されているページにギャップを残しません。
ページの右下隅にある固定要素に注目してください。使用されるCSSは次のとおりです。
例
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
}
position: fixed;位置：絶対;
の要素position: absolute;は、（固定のようにビューポートに対して配置されるのではなく）最も近い位置に配置された祖先に対して配置されます。
でも; 絶対位置の要素に位置の祖先がない場合は、ドキュメントの本文を使用し、ページのスクロールに沿って移動します。
注：絶対位置の要素は通常のフローから削除され、要素と重なる可能性があります。
簡単な例を次に示します。
使用される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;は、ユーザーのスクロール位置に基づいて配置されます。
スティッキー要素は、スクロール位置に応じてrelativeとの間で切り替わります。fixedビューポートで特定のオフセット位置に達するまで相対位置に配置されます。その後、所定の位置に「固定」されます（position：fixedなど）。
注： Internet Explorerは、スティッキーポジショニングをサポートしていません。Safariには-webkit-プレフィックスが必要です（以下の例を参照）。また、スティッキーポジショニングを機能させるには、、、topの少なくとも1つを指定する必要があります。rightbottomleft
この例では、top: 0スクロール位置に到達すると、スティッキー要素がページの上部（）に貼り付けられます。
例
div.sticky {
position: -webkit-sticky; /* Safari */
position:
sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
画像内のテキストの配置
画像上にテキストを配置する方法：
例
自分で試してみてください：
その他の例
This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.
All CSS Positioning Properties
| Property | Description |
|---|---|
| bottom | Sets the bottom margin edge for a positioned box |
| clip | Clips an absolutely positioned element |
| left | Sets the left margin edge for a positioned box |
| position | Specifies the type of positioning for an element |
| right | Sets the right margin edge for a positioned box |
| top | Sets the top margin edge for a positioned box |