CSS Position（位置指定）

positionプロパティは要素の位置指定方法を指定するために使用されます。

一般的な5つの値は次のとおりです：

要素はtop、right、bottomとleftプロパティで位置を調整できますが、これらのプロパティは設定されている場合にのみposition（かつ値がstatic）場合にのみ有効になります。 異なる位置指定方法は、これらのプロパティの参照対象と表現形式に影響します。

static 位置指定

HTML要素のデフォルト値であり、位置指定がない、つまり通常のドキュメントフローオブジェクトに従います。

静的配置された要素は top, bottom, left, right の影響を受けません。

fixed 位置指定

要素の位置はブラウザウィンドウに対して固定位置です。

ウィンドウをスクロールしても移動しません：

注意：Fixed 配置は IE7 および IE8 では !DOCTYPE の記述が必要です。

Fixed 配置は要素の位置をドキュメントフローから切り離すため、スペースを占有しません。

Fixed 配置された要素は他の要素と重なります。

relative 位置指定

相対配置された要素の位置は、その通常の位置を基準にします。

相対配置された要素を移動しても、元のスペースは変わりません。

相対配置された要素は、絶対配置された要素のコンテナブロックとしてよく使用されます。

absolute 位置指定

絶対配置された要素の位置は、最も近い位置指定済みの親要素を基準にします。要素に位置指定済みの親要素がない場合、その位置は <html> を基準にします：

absolute 配置は要素の位置をドキュメントフローから切り離すため、スペースを占有しません。

absolute 配置された要素は他の要素と重なります。

sticky 位置指定

sticky は英語で「粘る、貼り付く」という意味なので、粘着配置と呼ぶことができます。

position: sticky;ユーザーのスクロール位置に基づいて配置されます。

粘着配置された要素はユーザーのスクロールに依存し、position:relativeとposition:fixed位置指定の間を切り替えます。

その動作は次のようになります：position:relative;そしてページがターゲット領域を超えてスクロールすると、その動作は次のようになります：position:fixed;、ターゲット位置に固定されます。

要素の位置指定は、特定のしきい値を超えるまでは相対配置のように動作し、その後は固定配置のように動作します。

この特定のしきい値とは、top, right, bottom または left のいずれかを指します。言い換えると、top, right, bottom, left の4つのしきい値のいずれかを指定して初めて粘着配置が有効になります。それ以外の場合、その動作は相対配置と同じです。

注意：Internet Explorer、Edge 15 およびそれ以前の IE バージョンは sticky 配置をサポートしていません。Safari では -webkit- prefix を使用する必要があります（以下の例を参照）。

重なり合う要素

要素の位置指定はドキュメントフローと無関係なため、ページ上の他の要素を覆うことができます。

z-index プロパティは要素の重なり順（どの要素を前面に置くか、または後面に置くか）を指定します。

要素は正または負の重なり順を持つことができます：

より高い重なり順を持つ要素は、常により低い重なり順の要素の前面に表示されます。

注意：2つの位置指定された要素が重なり、z-index が指定されていない場合、HTMLコード内で最後に配置された要素が最前面に表示されます。

その他の例

要素の形状を切り抜く

この例では、要素の形状を設定する方法を示します。要素はこの形状に切り抜かれて表示されます。

スクロールバーを使用して要素内のあふれたコンテンツを表示する方法

この例では、overflow プロパティでスクロールバーを作成し、要素のコンテンツが指定領域を超える場合にどのように設定して適合させるかを示します。

ブラウザの自動オーバーフロー処理を設定する方法

この例では、ブラウザにオーバーフローを自動処理させる方法を示します。

カーソルを変更する

この例では、カーソルを変更する方法を示します。

すべてのCSS位置指定プロパティ

"CSS" 列の数字は、そのプロパティを定義したCSSバージョン（CSS1またはCSS2）を示します。