CSS Position（ポジション）

CSS position属性は、要素がページ上でどのように定位されるかを指定します。CSS Position（定位）の方法には以下のようなものがあります：静态定位（static）、絶対定位（absolute）、相対定位（relative）、固定定位（fixed）。

CSS定位方法

ウェブページ上で要素を適切に定位することは、良いレイアウトデザインにとって必要です。CSSには要素を定位するためのいくつかの方法があります。次のセクションではこれらの定位方法を順に紹介します。

静态定位（static）

静态定位の要素は常にページの正常な流程に基づいて定位されます。HTML要素はデフォルトで静态位置にあります。静态定位の要素は、top、bottom、left、right、およびz-index特性。

要素のposition属性値が指定されていない場合、またはデフォルトの状態では、要素は静态定位です。position属性をサポートするすべてのHTMLオブジェクトはデフォルトでstaticです。staticはposition属性のデフォルト値で、ブロックが元の位置に留まり、再定位されません。
言い換えると、平常は「position:static」を使う必要は全くありませんが、JavaScriptを使って要素の定位を制御する場合、他の定位方法の要素を静态定位に変えたい場合は「position:static;」を使用する必要があります。

.box {
　　　　padding:　20px;
　　　　background: #7dc765;
}

相対配置（relative）

相対配置の要素はその通常位置に対して位置決定されます。

相対配置スキーマでは、要素のフレーム位置は通常のフローに基づいて計算されます。その後、属性に基づいて位置決定されます。- topまたはbottomと/またはleftによりフレームをその正常位置から移動させます。

.box {
　　　　position: relative;
　　　　left:　100px;
}

絶対配置（absolute）

絶対配置の要素は、非静的位置を持つ最初の親要素に対して位置決定されます。そのような要素が見つからない場合、ブラウザのウィンドウの「左上角」に配置されます。top、right、bottom、およびleftのオフセットをさらに指定することで、位置決定に使用できる属性があります。

絶対配置の要素は通常のフローから完全に外れており、同級要素を配置する際には空間を占めません。ただし、z-index属性値は、他の要素と重なることができます。また、絶対配置の要素はmarginそれらは他のmarginと一緒に折りたたまれないことがあります。

.box {
　　　　position: fixed;
　　　　top:　200px;
　　　　left:　100px;
}

固定配置（fixed）

固定配置は絶対配置のサブカテゴリです。

唯一の違いは、固定配置された要素がブラウザのビューポートに対して固定され、スクロール時に動かないことです。

.box {
　　　　position: fixed;
　　　　top:　200px;
　　　　left:　100px;
}