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

Absolute positioning

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

配置レイアウト制御

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
position absolute context
122
122
134
26
122
26
position absolute context

絶対配置ボックスをサポート
122
122
134
26
122
26
position absolute context

絶対配置ボックスをサポート
122
122
134
26
122
26
absolute
1
12
1
1
18
1
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
実装メモ
  • Firefox 57 より前では、「border-collapse」が適用されているテーブル内の要素に絶対配置を適用すると、絶対配置が正しく機能しませんでした (バグ 1379306)。
  • Firefox 30 より前では、テーブルの行と行グループの絶対位置はサポートされていませんでした (バグ 63895)。

基本構文

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

ライブデモ

ツールチップ

CSS の ツールチップ パターンです。

プレビュー全画面表示

バッジ

CSS の バッジ パターンです。

プレビュー全画面表示

オーバーレイ

CSS の オーバーレイ パターンです。

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク