position

by 2 contributors:

概要

CSSposition プロパティは、要素の位置を決めるための別の規則を選びます。このプロパティは、スクリプトによるアニメーション効果に便利なように設計されています。

  • 初期値static
  • 適用対象全要素
  • 継承しない
  • メディアvisual
  • 計算値指定通り
  • アニメーションの可否不可
  • 正規順序形式文法で定義される一意のあいまいでない順序

位置指定された要素 (positioned element) とは、計算された position プロパティが relativeabsolutefixed のいずれかである要素です。

絶対位置指定された要素 (absolutely positioned element) とは、計算された position プロパティが absolute または fixed である要素です。

toprightbottomleft プロパティは、位置指定された要素の位置を定義します。

構文

形式文法: static | relative | absolute | fixed

static
規定の振る舞いです。toprightbottomleft プロパティは適用されません。
relative
すべての要素を位置指定されていないものとして配置した後、レイアウトを維持したまま、その要素の位置を決めます(こうして、位置指定されなかった場合にその要素が置かれるであろう場所にすき間が空きます)。position:relative の効果は、table-*-grouptable-rowtable-columntable-celltable-caption 要素では未定義です。
absolute
要素のためのスペースが確保されません。代わりに、その要素の位置を、位置指定された祖先要素のうちもっとも近いもの、もしくは、その要素の包含ブロックを基準にして決めます。絶対位置指定されたボックスのマージンは、他の要素のマージンと相殺されません。
fixed
要素のためのスペースが確保されません。代わりに、要素の位置は画面のビューポートを基準に決まり、スクロールされても動きません。印刷すると、どのページでも、要素は決まった位置に置かれます。

相対位置指定

要素を通常位置から相対的に上から 20px 、左から 20px の位置に置くには、次の様に指定します。

#two { position: relative; top: 20px; left: 20px; }

他の要素が、"Two" があたかも通常位置にあり、スペースを占有しているかのように並んでいることに注意してください。

絶対位置指定

相対位置指定された要素は依然として、文書内の通常の流し込み処理の対象であるとみなされます。それに比べて、絶対位置指定された要素は流し込み処理から外されるため、他の要素の配置時にスペースを占有しません。絶対位置指定された要素は、位置指定された祖先要素のうちもっとも近いもの に対して、相対的に位置が決められます。位置指定された祖先要素が存在しなければ、初期コンテナが使われます。

下の例では、青色の祖先 div 要素は相対位置指定され(したがってこれが最も近い位置指定された祖先要素になります)、Two は絶対位置指定されています。

#ancestor { position: relative; background: #ddf; width: 500px; }
#two { position: absolute; top: 20px; left: 20px; }

もし #ancestor を relative に位置指定しなかった場合、ボックス Two はページの左上隅に対して相対的な位置に現れるでしょう。

固定位置指定

固定位置指定は絶対位置指定に似ていますが、要素の包含ブロックがビューポートである点が違います。これはよく、ページをスクロールしても同位置に留まり続けるような 浮動要素 (floating element) を作るのに使われます。下の例ではボックス "One" はページの上から 80px、左から 20px の位置に固定されます。

#one { position: fixed; top: 80px; left: 20px }

ページの冒頭を見たときこのボックスは左上に現れます。スクロール後も、ビューポートに対して相対的に同じ位置に留まります。

fixed-1.png

相対位置指定された要素では、プロパティ topbottom は通常の位置からの垂直方向のオフセットを、プロパティ leftright は水平方向のオフセットを指定します。

絶対位置指定された要素では、プロパティ toprightbottomleft は要素の包含ブロック(相対位置の基準)の、各辺からのオフセットを指定します。要素のマージンはこれらのオフセットの内部にとられます。

絶対位置指定された要素の heightwidth プロパティには、たいてい auto 値が使われ、要素のコンテンツに最適な値が計算されます。しかしながら、絶対位置指定された非置換要素が、使用可能なスペースを埋めるようにするには、topbottom の両方を(auto 以外に)指定し、 height を未指定のままにします(これは auto です)。 leftrightwidth についても同様です。

絶対位置指定された要素が使用可能なスペースを埋める、いま述べたようなケース以外では:

  • topbottom の両方が指定されると (厳密には auto 以外に指定されると)、 top が優先されます。
  • leftright の両方が指定されると、directionltr(英語や横書きの日本語など)なら left が優先され、directionrtl(アラビア語、ヘブライ語など)なら right が優先されます。

仕様

仕様書 策定状況 コメント
CSS Level 2 (Revision 1) 勧告  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 1.0 (1.0) (See notes) 4.0 4.0 1.0 (85)
fixed value 1.0 1.0 (1.0) 7.0 4.0 1.0 (85)
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? 1.0 (1.0) (See notes) ? ? ?

Gecko に関する注記

Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7) では、テーブル内部にある絶対位置指定された要素の取り扱いが修正されました。以前は、位置指定された <table> 要素が位置指定された <div> のようなブロック要素の内部にあるとき、そのテーブル内の position: absolute; がスタイル指定された要素は最も近い位置指定された祖先要素であるテーブルではなく、外側の <div> 要素に対して相対的に位置決めされていました。これは不具合でしたが、修正されています。詳細については このポスト をご覧ください。

Internet Explorer に関する注記

Internet Explorer の後方互換モードでは、固定位置指定は動作しません

関連情報

ドキュメントのタグと貢献者

タグ: 
Contributors to this page: ethertank, sosleepy
最終更新者: ethertank,
サイドバーを隠す