CSSでのpositionプロパティを解説！absolute・static・fixedの使い方について
positionプロパティは、要素に使用される配置方法のタイプ(static、relative、fixed、absolute、sticky)を指定します。
positionプロパティ
positionプロパティは、要素に使用される配置方法のタイプを指定します。
5つの異なる位置の値があります。
staticrelativefixedabsolutesticky
要素は、top、bottom、left、およびrightプロパティを使用して配置されます。ただし、これらのプロパティは、positionプロパティが最初に設定されない限り機能しません。また、位置の値に応じて動作も異なります。
position: static;
HTML要素は、デフォルトで静的に配置されます。
静的に配置された要素は、上、下、左、および右のプロパティの影響を受けません。
position: static;を持つ要素は特別な方法で配置されていません。ページの通常の流れに従って常に配置されます。
使用するCSSは次のとおりです。
position: relative;
position: relative;を持つ要素は通常の位置に対して相対的に配置されます。
相対的に配置された要素の上、右、下、および左のプロパティを設定すると、通常の位置から離れて調整されます。他のコンテンツは、要素によって残されたギャップに収まるように調整されません。
使用するCSSは次のとおりです。
position: fixed;
position: fixed;を持つ要素はビューポートに対して相対的に配置されます。つまり、ページがスクロールされても、常に同じ場所にとどまります。要素の配置には、上、右、下、および左のプロパティが使用されます。
固定要素は、通常配置されるページにギャップを残しません。
ページの右下隅に固定要素があることに注意してください。使用するCSSは次のとおりです。
例
position: fixed;position: absolute;
position: absolute;を持つ要素は最も近くに配置された祖先に対して相対的に配置されます(fixedのようにビューポートに対して相対的に配置されるのではありません)。
しかし、絶対位置指定要素に位置指定先祖がない場合、文書本体を使用し、ページのスクロールとともに移動します。
注：絶対配置要素は通常のフローから削除され、要素を重ねることができます。
簡単な例を次に示します。
使用するCSSは次のとおりです。
例
position: sticky;
position: sticky;を持つ要素はユーザーのスクロール位置に基づいて配置されます。
スティッキー要素は、スクロール位置に応じてrelativeとfixedを切り替えます。ビューポートで指定されたオフセット位置が満たされるまで相対的に配置されます-その後、所定の位置に「固定」されます(position:fixedのように固定されます)。
注：Internet Explorerはスティッキーポジショニングをサポートしていません。 Safariには-webkit プレフィックスが必要です (以下の例を参照)。また、スティッキーポジショニングを機能させるには、top、right、bottomまたはleftの少なくとも1つを指定する必要があります。
この例では、スクロール位置に到達すると、sticky要素がページの上部(
top: 0)に固定されます。例
画像内のテキストの配置
画像の上にテキストを配置する方法
その他の例
この例は、要素の形状を設定する方法を示しています。要素はこの形状にクリップされて表示されます。
すべてのCSS位置プロパティ
|
プロパティ |
説明 |
|---|---|
| bottom | 配置されたボックスの下マージンの端を設定します。 |
| clip | 絶対位置の要素をクリップします。 |
| left | 配置されたボックスの左余白を設定します。 |
| position | 要素の配置のタイプを指定します。 |
| right | 配置されたボックスの右マージンの端を設定します。 |
| top | 配置されたボックスの上マージンの端を設定します。 |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。