CSSの`position`プロパティ：`absolute` vs `fixed`

CSSにおけるpositionプロパティは、Webページ上の要素の位置を制御するために重要です。
特にposition: absoluteとposition: fixedは、要素を特定の位置に配置する際に広く使用されますが、その動作は異なります。

`position: absolute`

position: absoluteは、要素を最も近い位置指定された祖先要素（positionがstatic以外）に対して絶対的に配置します。
要素は通常のドキュメントフローから削除され、他の要素との位置関係に影響されません。

html {
  position: relative;
}

.div-absolute {
  position: absolute;
  top: 20px;
  left: 20px;
}

この例では、.div-absoluteは<html>に対して絶対位置で配置されます。

position: fixedは、要素をビューポートに対して固定します。
この要素はスクロールに関係なく、常に同じ位置に表示されます。

.div-fixed {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

この例では、.div-fixedはビューポートの右下隅に固定されます。

position: absoluteとposition: fixedは、Webデザインにおいて柔軟なレイアウトオプションを提供します。
しかし、それぞれの動作の違いを理解し、適切な場面で使用することが重要です。