このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

CSS 位置指定レイアウト

CSS 位置指定レイアウト (CSS positioned layout) モジュールは、CSS で利用できる座標ベースの位置指定およびオフセット方式、ならびにウェブページ上で要素を位置指定し重ね合わせるために使用されるプロパティを定義します。このモジュールは、相対位置指定、粘着位置指定、絶対位置指定、固定位置指定といった基本的な位置指定方法を定義することで最もよく知られています。また、位置指定された要素の描画方法と重ね合わせ方についても定義し、重ね合わせの動作と視覚的な順序を明確にします。

位置指定レイアウトモジュールは、物理的、論理的、および一括指定インセットプロパティを定義しています。論理的プロパティにより、国際化とレスポンシブデザインを考慮して開発することができるようになります。

CSS のすべてのモジュールと同様に、このモジュールはそれ以外にも影響を与え、また影響を受けます。このモジュールでは、位置指定が CSS フレックスボックスレイアウトCSS グリッドレイアウトなどの他のレイアウトモジュールとどのように作用するかを規定します。CSS アンカー位置指定などの他のモジュールは、このモジュールを基盤として構築され、要素を他の要素やレイヤーに対して相対的に位置指定することを可能にします。

リファレンス

プロパティ

セレクター

用語集の用語と定義

ガイド

z-index を理解する

重ね合わせコンテキストの記述法と Z 順の動作方法の説明を、いくつかの例と共に紹介します。

z-index プロパティなしの重ね合わせ

z-index が使用されなかったときに適用される重ね合わせルールです。

浮動ボックスの重ね合わせ

浮動ボックスが重ね合わせでどのように扱われるかです。

z-index の使用

z-index を用いてデフォルトの重ね合わせを変更する方法です。

重ね合わせコンテキスト

CSS 重ね合わせコンテキスト、新しい重ね合わせコンテキストを生成する CSS 機能、入れ子の重ね合わせコンテキストについてです。

学習: 位置指定

さまざまな位置指定値とそれらの使い方です。

関連する概念

仕様書

Specification
CSS Positioned Layout Module Level 3
CSS Positioned Layout Module Level 4

関連情報