position: static; はデフォルトの値で、要素は文書の通常のフローに従って配置されます。top、right、bottom、left プロパティは無視されます。
position: relative; は要素を通常の文書フローに従って配置しますが、top、right、bottom、left プロパティを使用して、自分の位置を相対的に調整することができます。
position: absolute; は要素を通常の文書フローから外し、最も近い相対位置を持つ親要素を基準に配置します。もし相対位置を持つ親要素がなければ、最初に出現する位置決めされた先祖要素を基準にします。この例ではコンテナを基準に配置されています。
position: fixed; は要素を通常の文書フローから外し、ブラウザのビューポートを基準に配置します。スクロールしてもその位置に固定されます。この例では左上に表示されています。
position: sticky; は要素をスクロールに応じて固定する位置に配置します。要素は通常の文書フローに従い、指定された位置にスクロールすると固定されます。例えば、top: 20px; で指定します。