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

Absolute positioning

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

配置レイアウト制御

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.align-self.position_absolute_context
122
122
134
26
122
26
CSS プロパティ
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%);
}

ライブデモ

Tooltip

CSS tooltip demo.

プレビュー全画面表示

Badge

CSS badge demo.

プレビュー全画面表示

overlay

CSS overlay demo.

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク