path: root/files/ja/web/css/position/index.html

---
title: position
slug: Web/CSS/position
tags:
  - CSS
  - CSS Positioning
  - CSS Property
  - Reference
  - 'recipe:css-property'
translation_of: Web/CSS/position
---
<div>{{CSSRef}}</div>

<p><strong><code>position</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、文書内で要素がどのように配置されるかを設定します。 {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, {{Cssxref("left")}} の各プロパティが、配置された要素の最終的な位置を決めます。</p>

<div>{{EmbedInteractiveExample("pages/css/position.html")}}</div>

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>

<h2 id="Syntax" name="Syntax">構文</h2>

<p><code>position</code> プロパティは以下のキーワード値、グローバル値から１つを指定します。</p>

<h3 id="Values" name="Values">値</h3>

<dl>
 <dt id="static"><code>static</code></dt>
 <dd>要素は文書の通常のフローに従って配置されます。 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, {{cssxref("z-index")}} プロパティは<em>効果がありません</em>。これが既定値です。</dd>
 <dt id="relative"><code>relative</code></dt>
 <dd>要素は文書の通常のフローに従って配置され、 <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> の値に基づいて<em>自分自身からの相対</em>オフセットで配置されます。オフセットは他の要素の配置には影響を与えません。つまり、ページレイアウト内で要素に与えられる空間は、位置が <code>static</code> であった時と同じです。</dd>
 <dd><code>z-index</code> の値が <code>auto</code> でない場合、新しい<a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>を生成します。 <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code>, <code>table-caption</code> の要素における効果は未定義です。</dd>
 <dt id="absolute"><code>absolute</code></dt>
 <dd>要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。直近の配置されている祖先があれば、それに対して相対配置されます。そうでなければ、初期の<a href="/ja/docs/Web/CSS/Containing_Block">包含ブロック</a>に対して相対配置されます。最終的な位置は <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> の値によって決定されます。</dd>
 <dd>この値では、 <code>z-index</code> の値が <code>auto</code> ではない場合、新しい<a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>を作成します。絶対位置指定ボックスのマージンは、他の要素のマージンと<a href="/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">相殺</a>されません。</dd>
 <dt id="fixed"><code>fixed</code></dt>
 <dd>要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。{{glossary("viewport", "ビューポート")}}によって定められた初期の<a href="/ja/docs/Web/CSS/Containing_Block">包含ブロック</a>に対して相対配置されますが、祖先の一つに <code>transform</code>, <code>perspective</code>, <code>filter</code> の何れかのプロパティが <code>none</code> 以外 (<a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a> を参照) に設定されている場合は例外で、その場合は祖先が包含ブロックとしてふるまいます。 (なお、包含ブロック形成に寄与している <code>perspective</code> と <code>filter</code> に矛盾のあるブラウザーがあります。) 最終的な位置は <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> の値によって決定されます。</dd>
 <dd>この値は、常に新しい<a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>を作成します。印刷文書の場合、要素は<em>各ページ</em>の同じ位置に配置されます。</dd>
 <dt id="sticky"><code>sticky</code></dt>
 <dd>要素は文書の通常のフローに従って配置され、<em>直近のスクロールする祖先</em>および<a href="/ja/docs/Web/CSS/Containing_Block">包含ブロック</a> (直近のブロックレベル祖先、表関連要素を含む) に対して <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> の値に基づいて相対配置されます。オフセットは他の要素の配置には影響を与えません。</dd>
 <dd>この値は、常に新しい<a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>を生成します。なお粘着要素は、直近の祖先がスクロールしない場合でも、「スクロールの仕組み」を持つ直近の祖先 (<code>overflow</code> が <code>hidden</code>, <code>scroll</code>, <code>auto</code>, <code>overlay</code> として作成されたもの) に「粘着」します。これによって「粘着」のふるまいを効果的に抑止します (<a href="https://github.com/w3c/csswg-drafts/issues/865">GitHub issue on W3C CSSWG</a> を参照)。</dd>
</dl>

<h2 id="Description" name="Description">解説</h2>

<h3 id="Types_of_positioning" name="Types_of_positioning">位置の種類</h3>

<ul>
 <li><ruby><strong>位置指定要素</strong><rp> (</rp><rt>positioned element</rt><rp>) </rp></ruby>とは、 <code>position</code> の<a href="/ja/docs/Web/CSS/computed_value">計算値</a>が <code>relative</code>, <code>absolute</code>, <code>fixed</code>, <code>sticky</code> のいずれかである要素です。 (言い換えれば、 <code>static</code> 以外の全てです。)</li>
 <li><ruby><strong>相対位置指定要素</strong><rp> (</rp><rt>relatively positioned element</rt><rp>) </rp></ruby>とは、 <code>position</code> の<a href="/ja/docs/Web/CSS/computed_value">計算値</a>が <code>relative</code> である要素です。 {{Cssxref("top")}} および {{Cssxref("bottom")}} プロパティは、通常の位置からの垂直方向のオフセットを指定します。 {{Cssxref("left")}} および {{Cssxref("right")}} プロパティは、水平方向のオフセットを指定します。</li>
 <li><ruby><strong>絶対位置指定要素</strong><rp> (</rp><rt>absolutely positioned element</rt><rp>) </rp></ruby>とは、 <code>position</code> の<a href="/ja/docs/Web/CSS/computed_value">計算値</a>が <code>absolute</code> または <code>fixed</code> である要素です。 {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, {{Cssxref("left")}} の各プロパティは、この要素の<a href="/ja/docs/Web/CSS/Containing_Block">包含ブロック</a>の端からのオフセットを指定します。 (包含ブロックは配置される要素の祖先です。) 要素にマージンがある場合は、オフセットにマージンが追加されます。この要素は内容のために新しい <a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">ブロック整形コンテキスト</a> (BFC) を生成します。</li>
 <li><ruby><strong>粘着位置指定要素</strong><rp> (</rp><rt>stickily positioned element</rt><rp>) </rp></ruby>とは、 <code>position</code> の<a href="/ja/docs/Web/CSS/computed_value">計算値</a>が <code>sticky</code> である要素です。これは<a href="/ja/docs/Web/CSS/Containing_Block">包含ブロック</a>がフロールート (又はその中でスクロールするコンテナー) 内の指定されたしきい値 (例えば {{Cssxref("top")}} に設定された auto 以外の値など) を達するまでは相対的な配置として扱われ、<a href="/ja/docs/Web/CSS/Containing_Block">包含ブロック</a>の反対の端が来るまでその位置に「粘着」するものとして扱われます。</li>
</ul>

<p>ほとんどの場合、絶対位置指定要素に {{Cssxref("height")}} および {{Cssxref("width")}} が <code>auto</code> が設定されると、内容に合うように大きさが調整されます。しかし、非<a href="/ja/docs/Web/CSS/Replaced_element">置換</a>要素で絶対位置指定要素は、 {{Cssxref("top")}} および {{Cssxref("bottom")}} を指定して {{Cssxref("height")}} を指定しない (つまり <code>auto</code> の) ままにすることで、利用できる垂直の空間を埋めることができます。同様に、 {{Cssxref("left")}} および {{Cssxref("right")}} を指定して {{Cssxref("width")}} を <code>auto</code> のままにすることで、利用できる水平の空間を埋めることができます。</p>

<p>以下に記述された場合を除きます (絶対位置指定要素で利用できる空間を埋める場合)。</p>

<ul>
 <li><code>top</code> と <code>bottom</code> の両方を指定すると (<code>auto</code>ではなく)、 <code>top</code> が優先されます。</li>
 <li><code>left</code> と <code>right</code> の両方を指定すると、 {{Cssxref("direction")}} が <code>ltr</code> (英語、横書き日本語、など) の場合は <code>left</code> が優先され、 {{Cssxref("direction")}} が <code>rtl</code> (ペルシャ語、アラビア語、ヘブライ語、 など)の場合は <code>right</code> が優先されます。</li>
</ul>

<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>

<p><code>absolute</code> または <code>fixed</code> の値で配置された要素は、ページがズームしてテキストの大きさを大きくしたら、その他の要素を妨害していないかどうかを確認してください。</p>

<ul>
 <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0</a></li>
</ul>

<h3 id="パフォーマンスとアクセシビリティ">パフォーマンスとアクセシビリティ</h3>

<p><code>fixed</code> または <code>sticky</code> を含む要素の内容をスクロールすると、パフォーマンスやアクセシビリティの問題を引き起こす可能性があります。ユーザーがスクロールする際、ブラウザーは sticky や fixed のコンテンツを新しい場所に再描画しなければなりません。再描画する必要があるコンテンツ、ブラウザーの性能や、端末の処理速度によっては、ブラウザーは 60 <abbr title="frames per second">fps</abbr> で再描画を管理することができず、敏感な人々にアクセシビリティの問題を起こし、誰からも汚く見えることになります。一つの解決方法として、位置配置要素に {{cssxref("will-change", "will-change: transform")}} を追加して要素を独自のレイヤーで描画させるようにすると、再描画の速度が上がり、性能問題やアクセシビリティを改善することができます。</p>

<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>

<p>{{cssinfo}}</p>

<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>

{{csssyntax}}

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Relative_positioning" name="Relative_positioning">相対位置指定</h3>

<p>相対位置指定の要素は文書中の通常の配置から、指定された量だけオフセットしますが、ほかの要素にはオフセットの影響を与えません。以下の例では、 "Two" が通常の位置に空間を得ているように他の要素が配置されることに注意してください。</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;div class="box" id="one"&gt;One&lt;/div&gt;
&lt;div class="box" id="two"&gt;Two&lt;/div&gt;
&lt;div class="box" id="three"&gt;Three&lt;/div&gt;
&lt;div class="box" id="four"&gt;Four&lt;/div&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">* {
  box-sizing: border-box;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}
</pre>

<p>{{EmbedLiveSample('Relative_positioning', '', '200px')}}</p>

<h3 id="Absolute_positioning" name="Absolute_positioning">絶対位置指定</h3>

<p>相対位置指定の要素も、文書の通常のフローの中に配置されます。それに対して、絶対位置指定の要素はフローから除外されます。つまり、他の要素はこの要素が存在しないかのように配置されます。絶対位置指定の要素は<em>配置された直近の祖先</em> (つまり、 <code>static</code> ではない直近の祖先) に対して相対的に配置されます。配置された祖先がない場合は、 ICB (initial containing block — <a href="https://www.w3.org/TR/CSS2/visudet.html#containing-block-details">W3C の定義</a>も御覧ください) すなわち文書のルート要素の包含ブロックに対する相対的な配置になります。</p>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html notranslate">&lt;h1&gt;Absolute positioning&lt;/h1&gt;

&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;

&lt;p class="positioned"&gt;By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.&lt;/p&gt;

&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;

&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css notranslate">* {
  box-sizing: border-box;
}

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}</pre>

<h4 id="Result" name="Result">結果</h4>

<p>{{EmbedLiveSample('Absolute_positioning', '', '420px')}}</p>

<h3 id="Fixed_positioning" name="Fixed_positioning">固定位置指定</h3>

<p>固定位置指定は絶対位置指定に似ていますが、要素の<a href="/ja/docs/Web/CSS/Containing_Block">包含ブロック</a>が<em>ビューポート</em>によって定義される初期包含ブロックであるという点が異なり、祖先の一つに <code>transform</code>, <code>perspective</code>, <code>filter</code> の何れかのプロパティが <code>none</code> 以外 (<a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a> を参照) に設定されている場合は例外で、その場合は祖先が<a href="/ja/docs/Web/CSS/Containing_Block">包含ブロック</a>としてふるまいます。これはよく、ページをスクロールしても同位置に留まり続けるような「浮く」要素 ("floating" element) を作るのに使われます。下の例ではボックス "One" はページの上から 80px、左から 10px の位置に固定されます。スクロールしても、ビューポートに対して同じ位置に留まり続けます。</p>

<h4 id="HTML_3">HTML</h4>

<pre class="brush: html notranslate">&lt;div class="outer"&gt;
  &lt;p&gt;
    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.
  &lt;/p&gt;
  &lt;p&gt;
    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.
  &lt;/p&gt;
  &lt;div class="box" id="one"&gt;One&lt;/div&gt;
&lt;/div&gt;
</pre>

<h4 id="CSS_3">CSS</h4>

<pre class="brush: css notranslate">* {
  box-sizing: border-box;
}

.box {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#one {
  position: fixed;
  top: 80px;
  left: 10px;
  background: blue;
}

.outer {
  width: 500px;
  height: 300px;
  overflow: scroll;
  padding-left: 150px;
}
</pre>

<h4 id="Result_2" name="Result_2">結果</h4>

<p>{{EmbedLiveSample('Fixed_positioning', '', '300px')}}</p>

<h3 id="Sticky_positioning" name="Sticky_positioning">粘着位置指定</h3>

<p>粘着位置指定は、相対位置指定と固定位置指定を組み合わせたものです。粘着位置指定された要素は、指定したしきい値に達するまでは相対位置指定として、しきい値に達したら固定位置指定として扱われます。例えば・・・</p>

<pre class="brush: css notranslate">#one { position: sticky; top: 10px; }</pre>

<p>例えば上記のスタイルは、ビューポートをスクロールして要素の位置が上端から 10px より小さくなるまでは、相対位置指定の要素としてふるまいます。それ以降はしきい値を超えるほどビューポートのスクロールを戻すまで、上端から 10px で固定位置指定になります。</p>

<p>粘着位置指定は一般的に、アルファベット順や五十音順のリストの見出しに使用されます。見出し A の項目をスクリーン外にスクロールするまで、見出し B は A の項目の後ろに表示されています。見出し B はコンテンツの残りの部分とともにスクリーン外に移動するのではなく、見出し B のすべての項目をスクリーン外にスクロールして見出し C に含まれる部分に達するまで、ビューポートの上部に固定されます。</p>

<p>粘着位置指定を想定したとおりに動作させるためには、 <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> のうち少なくとも一つでしきい値を指定しなければなりません。しきい値を指定しなければ、相対位置指定との違いがなくなるでしょう。</p>

<h4 id="HTML_4">HTML</h4>

<pre class="brush: html notranslate">&lt;dl&gt;
  &lt;div&gt;
    &lt;dt&gt;A&lt;/dt&gt;
    &lt;dd&gt;Andrew W.K.&lt;/dd&gt;
    &lt;dd&gt;Apparat&lt;/dd&gt;
    &lt;dd&gt;Arcade Fire&lt;/dd&gt;
    &lt;dd&gt;At The Drive-In&lt;/dd&gt;
    &lt;dd&gt;Aziz Ansari&lt;/dd&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;dt&gt;C&lt;/dt&gt;
    &lt;dd&gt;Chromeo&lt;/dd&gt;
    &lt;dd&gt;Common&lt;/dd&gt;
    &lt;dd&gt;Converge&lt;/dd&gt;
    &lt;dd&gt;Crystal Castles&lt;/dd&gt;
    &lt;dd&gt;Cursive&lt;/dd&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;dt&gt;E&lt;/dt&gt;
    &lt;dd&gt;Explosions In The Sky&lt;/dd&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;dt&gt;T&lt;/dt&gt;
    &lt;dd&gt;Ted Leo &amp;amp; The Pharmacists&lt;/dd&gt;
    &lt;dd&gt;T-Pain&lt;/dd&gt;
    &lt;dd&gt;Thrice&lt;/dd&gt;
    &lt;dd&gt;TV On The Radio&lt;/dd&gt;
    &lt;dd&gt;Two Gallants&lt;/dd&gt;
  &lt;/div&gt;
&lt;/dl&gt;
</pre>

<h4 id="CSS_4">CSS</h4>

<pre class="brush: css notranslate">* {
  box-sizing: border-box;
}

dl &gt; div {
  background: #FFF;
  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;
}
</pre>

<h4 id="結果">結果</h4>

<p>{{EmbedLiveSample('Sticky_positioning', '', '300px')}}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Positioning','#position-property','position')}}</td>
   <td>{{Spec2('CSS3 Positioning')}}</td>
   <td><code>sticky</code> 値を追加。</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("css.properties.position")}}</p>