概要

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

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

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

相対位置指定された要素 (relatively positioned element) とは、計算された position プロパティが relative である要素です。

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

Sticky 位置指定された要素 (stickily positioned element) とは、計算された position プロパティが sticky である要素です。

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

構文

/* キーワード値 */
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

/* グローバル値 */
position: inherit;
position: initial;
position: unset;

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

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

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

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

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

  • topbottom の両方が指定されると (厳密には auto 以外に指定されると)、 top が優先されます。
  • leftright の両方が指定されると、directionltr(英語や横書きの日本語など)なら left が優先され、directionrtl(アラビア語、ヘブライ語など)なら 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.enabledtrue にした場合に限り、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 位置指定は検討中です。

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

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