HTML5 の position をより深く理解する

HTML5では、positionプロパティは、ドキュメント内で要素の位置を制御します。4つのオプションがあります、static（デフォルト）、relative、fixed、absoluteです。

1. 静的：エレメントの配置は、既定のドキュメントの流れに従い、top、bottom、left、rightプロパティの影響を受けません。
2. 配置：文書中の要素の位置を基準にして行います。要素の相対的位置はtop、bottom、left、rightプロパティで調整できますが、ほかの要素の配置には影響しません。
3. 画面がスクロールしても、要素はブラウザ画面に対して固定表示されます。位置調整は、top、bottom、left、rightの属性で指定します。
4. 絶対：要素は最も近い祖先の配置済み要素を基準に配置されます（配置済み祖先要素がない場合は文書を基準にします）。top、bottom、left、right 属性を使用して要素の位置を調整できますが、他の要素のレイアウトに影響します。

上記 4 つの値に加えて、position プロパティには sticky という値があり、固定位置と相対位置の混合位置に要素を配置します。要素は通常のドキュメント フローに基づいて配置され、スクロールが指定されたオフセット位置に達すると固定位置になります。

ポジションプロパティにより、ページ内での要素の配置を自在に制御し、さまざまなレイアウトを実現できます。