概要
CSS の position
プロパティは、要素の位置を決めるための別の規則を選びます。このプロパティは、スクリプトによるアニメーション効果に便利なように設計されています。
初期値 | static |
---|---|
適用対象 | 全要素 |
継承 | 不可 |
メディア | visual |
計算値 | 指定値 |
Animation type | discrete |
正規順序 | 形式文法で定義される一意のあいまいでない順序 |
Creates stacking context | 継承する |
位置指定された要素 (positioned element) とは、計算された position
プロパティが relative
、absolute
、fixed
、sticky
のいずれかである要素です。
相対位置指定された要素 (relatively positioned element) とは、計算された position
プロパティが relative
である要素です。
絶対位置指定された要素 (absolutely positioned element) とは、計算された position
プロパティが absolute
または fixed
である要素です。
Sticky 位置指定された要素 (stickily positioned element) とは、計算された position
プロパティが sticky
である要素です。
top
、right
、bottom
、 left
プロパティは、位置指定された要素の位置を定義します。
構文
/* キーワード値 */ position: static; position: relative; position: absolute; position: fixed; position: sticky; /* グローバル値 */ position: inherit; position: initial; position: unset;
値
static
- フロー内の現在の位置に配置される、通常の挙動です。
top
、right
、bottom
、left
、z-index
プロパティは適用されません。 relative
- すべての要素を位置指定されていないものとして配置した後、レイアウトを維持したまま、その要素の位置を決めます(こうして、位置指定されなかった場合にその要素が置かれるであろう場所にすき間が空きます)。
position:relative
の効果は、table-*-group
、table-row
、table-column
、table-cell
、table-caption
要素では未定義です。 absolute
- 要素のためのスペースが確保されません。代わりに、その要素の位置を、位置指定された祖先要素のうちもっとも近いもの、もしくは、その要素の初期包含ブロックを基準にして決めます。絶対位置指定されたボックスのマージンは、他の要素のマージンと相殺されません。
fixed
- 要素のためのスペースが確保されません。代わりに、要素の位置は画面のビューポートを基準に決まり、スクロールされても動きません。印刷すると、どのページでも、要素は決まった位置に置かれます。この値は、常に新たなスタック文脈を生成します。祖先要素の
transform
プロパティがnone
以外に設定されている場合、その祖先要素がビューポートの代わりにこの要素の包含ブロックとして使用されます (CSS Transforms 仕様 を参照)。 sticky
- ボックスの位置を、通常のフローに従って計算します (通常フローの位置と呼びます)。そして、フロールートまたは包含ブロックに対して相対的にオフセットします。
table
要素を含むすべての場合において、後続ボックスの位置に影響を与えません。ボックス B が Sticky 位置指定であるとき、後続のボックスの位置は B がオフセットされていないかのように計算されます。table
要素では、‘position: sticky
’ の効果は ‘position: relative
’ と同じです。
形式文法
static | relative | absolute | sticky | fixed
例
相対位置指定
要素を通常位置から相対的に上から 20px 、左から 20px の位置に置くには、次の様に指定します。
HTML コンテンツ
<div class="box" id="one">One</div> <div class="box" id="two">Two</div> <div class="box" id="three">Three</div> <div class="box" id="four">Four</div>
CSS コンテンツ
.box { display: inline-block; background: red; width: 100px; height: 100px; float: left; margin: 20px; color: white; } #two { position: relative; top: 20px; left: 20px; }
他の要素が、"Two" があたかも通常位置にあり、スペースを占有しているかのように並んでいることに注意してください。
絶対位置指定
相対位置指定された要素は依然として、文書内の通常の流し込み処理の対象であるとみなされます。それに比べて、絶対位置指定された要素は流し込み処理から外されるため、他の要素の配置時にスペースを占有しません。絶対位置指定された要素は、位置指定された (static
ではない) 祖先要素のうちもっとも近いもの に対して、相対的に位置が決められます。位置指定された祖先要素が存在しなければ、初期コンテナが使われます。
下の例では、位置指定された祖先要素がないため、ボックス Three は直接の祖先 (ここでは iframe の <body>
) に対して絶対位置指定されています。
HTML コンテンツ
<div class="box" id="one">One</div> <div class="box" id="two">Two</div> <div class="box" id="three">Three</div> <div class="box" id="four">Four</div>
CSS コンテンツ
.box { display: inline-block; background: red; width: 100px; height: 100px; float: left; margin: 20px; color: white; } #three { position: absolute; top: 20px; left: 20px; }
固定位置指定
固定位置指定は絶対位置指定に似ていますが、要素の包含ブロックがビューポートである点が違います。これはよく、ページをスクロールしても同位置に留まり続けるような 浮動要素 (floating element) を作るのに使われます。下の例ではボックス "One" はページの上から 80px、左から 20px の位置に固定されます。
HTML コンテンツ
<div class="outer"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. </p> <div class="box" id="one">One</div> </div>
CSS コンテンツ
.box { background: red; width: 100px; height: 100px; margin: 20px; color: white; } #one { position: fixed; top: 80px; left: 10px; } .outer { width: 500px; height: 300px; overflow: scroll; padding-left: 150px; }
ページの冒頭を見たときこのボックスは左上に現れます。スクロール後も、ビューポートに対して相対的に同じ位置に留まります。
Sticky 位置指定
Sticky 位置指定は、相対位置指定と固定位置指定を組み合わせたものです。要素は指定したしきい値に達するまで相対位置指定として、しきい値に達したら固定位置指定として扱われいます。
#one { position: sticky; top: 10px; }
例えば上記のスタイルは、ビューポートをスクロールして要素の位置が上端から 10px より小さくなるまでは、相対位置指定の要素としてふるまいます。それ以降はしきい値を超えるほどビューポートのスクロールを戻すまで、上端から 10px で固定位置指定になります。
Sticky 配置は一般的に、アルファベット順や五十音順のリストの見出しに使用されます。見出し A の項目をスクリーン外にスクロールするまで、見出し B は A の項目の後ろに表示されています。見出し B はコンテンツの残りの部分とともにスクリーン外に移動するのではなく、見出し B のすべての項目をスクリーン外にスクロールして見出し C に含まれる部分に達するまで、ビューポートの上部に固定されます。
Sticky 位置指定を想定したとおりに動作させるために、top
、right
、bottom
、left
のうち少なくとも 1 つでしきい値を指定しなければなりません。しきい値を指定しなければ、相対位置指定との違いがなくなるでしょう。
HTML コンテンツ
<div> <dl> <dt>A</dt> <dd>Andrew W.K.</dd> <dd>Apparat</dd> <dd>Arcade Fire</dd> <dd>At The Drive-In</dd> <dd>Aziz Ansari</dd> </dl> <dl> <dt>C</dt> <dd>Chromeo</dd> <dd>Common</dd> <dd>Converge</dd> <dd>Crystal Castles</dd> <dd>Cursive</dd> </dl> <dl> <dt>E</dt> <dd>Explosions In The Sky</dd> </dl> <dl> <dt>T</dt> <dd>Ted Leo & The Pharmacists</dd> <dd>T-Pain</dd> <dd>Thrice</dd> <dd>TV On The Radio</dd> <dd>Two Gallants</dd> </dl> </div>
CSS コンテンツ
* { box-sizing: border-box; } dl { margin: 0; padding: 24px 0 0 0; } dt { background: #B8C1C8; border-bottom: 1px solid #989EA4; border-top: 1px solid #717D85; color: #FFF; font: bold 18px/21px Helvetica, Arial, sans-serif; margin: 0; padding: 2px 0 0 12px; position: -webkit-sticky; position: sticky; top: -1px; } dd { font: bold 20px/45px Helvetica, Arial, sans-serif; margin: 0; padding: 0 0 0 12px; white-space: nowrap; } dd + dd { border-top: 1px solid #CCC }
注
相対位置指定された要素では、プロパティ top
や bottom
は通常の位置からの垂直方向のオフセットを、プロパティ left
や right
は水平方向のオフセットを指定します。
絶対位置指定された要素では、プロパティ top
、right
、bottom
、left
は要素の包含ブロック(相対位置の基準)の、各辺からのオフセットを指定します。要素のマージンはこれらのオフセットの内部にとられます。
絶対位置指定された要素の height
と width
プロパティには、たいてい auto
値が使われ、要素のコンテンツに最適な値が計算されます。しかしながら、絶対位置指定された非置換要素が、使用可能なスペースを埋めるようにするには、top
と bottom
の両方を(auto
以外に)指定し、 height
を未指定のままにします(これは auto
です)。 left
、right
、width
についても同様です。
絶対位置指定された要素が使用可能なスペースを埋める、いま述べたようなケース以外では:
top
とbottom
の両方が指定されると (厳密にはauto
以外に指定されると)、top
が優先されます。left
とright
の両方が指定されると、direction
がltr
(英語や横書きの日本語など)ならleft
が優先され、direction
がrtl
(ペルシャ語、アラビア語、ヘブライ語など)ならright
が優先されます。
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
CSS Level 2 (Revision 1) position の定義 |
勧告 | |
CSS Positioned Layout Module Level 3 position の定義 |
草案 | sticky 値を追加。 |
ブラウザ実装状況
機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
基本サポート | 1.0 | 1.0 (1.0) [1] | 4.0 [3] | 4.0 | 1.0 (85) |
fixed 値 |
1.0 | 1.0 (1.0) [5] | 7.0 | 4.0 | 1.0 (85) |
sticky 値 |
未サポート [4] | 32 (32.0) [2] | 未サポート [6] | 未サポート | 6.1 -webkit- |
機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
基本サポート | ? | 1.0 (1.0) [1] | ? | ? | 7.0 -webkit- |
[1] Firefox 30 より、Gecko は position: relative;
を指定した <tr>
、<thead>
、<tfoot>
要素を、絶対位置指定のコンテナとして認めるようになりました。すなわちテーブル内にある position: absolute;
の要素を、これらの要素に対して相対的に配置できます。他のブラウザや古いバージョンの Firefox では、テーブルの行や行グループに position: relative;
を設定しても効果はありません。Firefox ではこの機能を使用した場合に JavaScript コンソールへ "テーブル列と列グループは相対的な位置に配置できます" という警告を表示することで、新しい動作への移行やサイトで発生する可能性があるレンダリングの問題への気づきを支援します。この機能の効果がないことに依存している可能性があるため、サイトを更新しなければならないでしょう。
[2] Firefox 26 から 31 では、about:config
で設定項目 layout.css.sticky.enabled
を true
にした場合に限り、Sticky 位置指定が動作します。Firefox 27 から 31 では、Nightly および Aurora 版のブラウザでデフォルト値を true にしていました。この設定は Firefox 48 で削除しました。
[3] Internet Explorer の後方互換モードでは、固定位置指定は動作しません。
[4] Sticky 位置指定のサポートは Chrome 23 で削除されましたが、将来サポートする計画があります。
[5] Firefox 44 より前のバージョンでは、ほとんどの場合に position: fixed
で新たなスタック文脈を生成していませんでした。Chrome や Safari が長い間実装していた動作に合わせるよう、仕様書および Gecko の実装を変更しました。
[6] Edge では、Sticky 位置指定は検討中です。