Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

概要

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

初期値static
適用対象全要素
継承不可
メディアvisual
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序
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 位置指定は検討中です。

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

タグ: 
 このページの貢献者: hamasaki, unarist, yyss, fscholz, teoli, ethertank, sosleepy
 最終更新者: hamasaki,