Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
レイアウト Widely available

Absolute positioning

position: absolute は要素を通常のドキュメントフローから切り離し、指定した座標に自由に配置できます。モーダルダイアログ、ドロップダウンメニュー、ツールチップなど、他の要素に重ねて表示する必要があるUIの構築に不可欠です。containing blockの仕組みを理解することが正確な配置の鍵となります。

配置レイアウト制御

概要

position: absolute は要素を通常のドキュメントフローから切り離し、指定した座標に自由に配置できます。モーダルダイアログ、ドロップダウンメニュー、ツールチップなど、他の要素に重ねて表示する必要があるUIの構築に不可欠です。containing blockの仕組みを理解することが正確な配置の鍵となります。

対応ブラウザ

デスクトップ

Chrome 1+
Edge 12+
Safari 1+
Firefox 1+

モバイル

Chrome Android 18+
Safari iOS 1+
Firefox Android 4+

基本構文

CSS 
.tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

実務での使いどころ

  • ツールチップやポップオーバーの配置

    親要素に position: relative を設定し、子要素を absolute で正確な位置に重ねて表示できます。

注意点

  • position: absolute を使用すると要素が通常フローから外れるため、周囲の要素のレイアウトに影響を与えません。containing block（通常は最も近い positioned 祖先）が意図したものか確認してください。

アクセシビリティ

  • 視覚的な配置順序とDOMの順序が異なる場合、スクリーンリーダーのユーザーにとって混乱を招く可能性があります。読み上げ順序を意識したDOM構造を心がけてください。

参考リンク