diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/css/css_positioning | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/ja/web/css/css_positioning')
9 files changed, 1262 insertions, 0 deletions
diff --git a/files/ja/web/css/css_positioning/index.html b/files/ja/web/css/css_positioning/index.html new file mode 100644 index 0000000000..fbfc022492 --- /dev/null +++ b/files/ja/web/css/css_positioning/index.html @@ -0,0 +1,61 @@ +--- +title: CSS 位置指定レイアウト +slug: Web/CSS/CSS_Positioning +tags: + - CSS + - CSS 位置指定レイアウト + - Reference + - 概要 +translation_of: Web/CSS/CSS_Positioning +--- +<div>{{CSSRef}}</div> + +<p><ruby><strong>CSS 位置指定レイアウト</strong><rp> (</rp><rt>CSS Positioned Layout</rt><rp>) </rp></ruby>は CSS モジュールの一つで、ページ上での要素の位置指定方法を定義します。</p> + +<h2 id="Reference" name="Reference">リファレンス</h2> + +<h3 id="CSS_properties" name="CSS_properties">CSS プロパティ</h3> + +<div class="index"> +<ul> + <li>{{cssxref("bottom")}}</li> + <li>{{cssxref("clear")}}</li> + <li>{{cssxref("float")}}</li> + <li>{{cssxref("left")}}</li> + <li>{{cssxref("position")}}</li> + <li>{{cssxref("right")}}</li> + <li>{{cssxref("top")}}</li> + <li>{{cssxref("z-index")}}</li> +</ul> +</div> + +<h2 id="Guides" name="Guides">ガイド</h2> + +<dl> + <dt><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index">CSS の z-index を理解する</a></dt> + <dd>重ね合わせコンテキストの記述法と Z 順の動作方法の説明を、いくつかの例と共に紹介します。</dd> +</dl> + +<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('CSS3 Positioning') }}</td> + <td>{{ Spec2('CSS3 Positioning') }}</td> + <td> </td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'visuren.html') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td> </td> + </tr> + </tbody> +</table> diff --git a/files/ja/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/ja/web/css/css_positioning/understanding_z_index/adding_z-index/index.html new file mode 100644 index 0000000000..db4d102e1b --- /dev/null +++ b/files/ja/web/css/css_positioning/understanding_z_index/adding_z-index/index.html @@ -0,0 +1,164 @@ +--- +title: z-index の使用 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +tags: + - Advanced + - CSS + - Guide + - Reference + - Understanding_CSS_z-index + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +--- +<div>{{cssref}}</div> + +<p>この記事の最初の部分、<a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">z-index なしの重ね合わせ</a>は、既定でどのように重ね合わせが行われるのかを説明します。独自の重ね合わせ順を定義したい場合は、<a href="/ja/docs/Web/CSS/position#Types_of_positioning">位置指定</a>要素に {{cssxref("z-index")}} プロパティを使用して行うことができます。</p> + +<p><code>z-index</code> プロパティは整数値 (正の数、ゼロ、負の数) で指定することができ、 Z 軸方向の要素の位置を表します。もし Z 軸になじみがないのであれば、重ね合わされたレイヤーがあって、それぞれに番号が付いていることを想像してください。レイヤーは番号順に、大きな番号は小さな番号の上に描画されます。</p> + +<ul> + <li>最下位レイヤー <em>(観ている人から一番遠い)</em></li> + <li>...</li> + <li>Layer -3</li> + <li>Layer -2</li> + <li>Layer -1</li> + <li>Layer 0 <em>(既定の描画レイヤー)</em></li> + <li>Layer 1</li> + <li>Layer 2</li> + <li>Layer 3</li> + <li>...</li> + <li>最上位レイヤー <em>(観ている人に一番近い)</em></li> +</ul> + +<div class="note"> +<p><strong>注:</strong></p> + +<ul> + <li>z-index プロパティが定義されていなければ、要素は既定の描画レイヤー 0 (ゼロ) に描画されます。</li> + <li>同じ <code>z-index</code> 値を持つ要素が複数あれば (＝同じレイヤー上にある場合)、 <a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">z-index なしの重ね合わせ</a>で説明した重ね合わせ規則が当てはまります。</li> +</ul> +</div> + +<p>次の例では、レイヤーの重なり順が <code>z-index</code> を使って決め直されています。#5 の <code>z-index</code> は 、位置指定要素でないため効果を持ちません。</p> + +<p>{{EmbedLiveSample("Source_code_for_the_example", 600, 400)}}</p> + +<h2 id="Source_code_for_the_example" name="Source_code_for_the_example">例のソースコード</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div id="abs1"> + <b>DIV #1</b> + <br />position: absolute; + <br />z-index: 5; +</div> + +<div id="rel1"> + <b>DIV #2</b> + <br />position: relative; + <br />z-index: 3; +</div> + +<div id="rel2"> + <b>DIV #3</b> + <br />position: relative; + <br />z-index: 2; +</div> + +<div id="abs2"> + <b>DIV #4</b> + <br />position: absolute; + <br />z-index: 1; +</div> + +<div id="sta1"> + <b>DIV #5</b> + <br />no positioning + <br />z-index: 8; +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">div { + padding: 10px; + opacity: 0.7; + text-align: center; +} + +b { + font-family: sans-serif; +} + +#abs1 { + z-index: 5; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + left: 10px; + border: 1px dashed #900; + background-color: #fdd; +} + +#rel1 { + z-index: 3; + height: 100px; + position: relative; + top: 30px; + border: 1px dashed #696; + background-color: #cfc; + margin: 0px 50px 0px 50px; +} + +#rel2 { + z-index: 2; + height: 100px; + position: relative; + top: 15px; + left: 20px; + border: 1px dashed #696; + background-color: #cfc; + margin: 0px 50px 0px 50px; +} + +#abs2 { + z-index: 1; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + right: 10px; + border: 1px dashed #900; + background-color: #fdd; +} + +#sta1 { + z-index: 8; + height: 70px; + border: 1px dashed #996; + background-color: #ffc; + margin: 0px 50px 0px 50px; +} +</pre> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">z-index なしの重ね合わせ</a> : 既定の重ね合わせ規則</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">浮動ブロックの重ね合わせ</a>: 浮動要素が重ね合わせでどのように扱われるか</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>: 重ね合わせコンテキストについてのメモ</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">重ね合わせコンテキストの例 1</a>: 2階層の HTML 構造で、最終階層の z-index</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">重ね合わせコンテキストの例 2</a>: 2階層の HTML 構造、全レベルの z-index</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">重ね合わせコンテキストの例 3</a>: 3階層の HTML 構造、第2階層の z-index</li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">原典情報</h2> + +<ul> + <li>原著者: Paolo Lombardi</li> + <li>この記事は原著者が <a href="http://www.yappy.it">YappY</a> のためにイタリア語で書いた記事の英訳の邦訳です。<a href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> の条件に従う限り、全内容の共有を認めます。</li> + <li>最終更新日: 2014 年 11 月 3 日</li> +</ul> +</div> diff --git a/files/ja/web/css/css_positioning/understanding_z_index/index.html b/files/ja/web/css/css_positioning/understanding_z_index/index.html new file mode 100644 index 0000000000..cd1337f9a5 --- /dev/null +++ b/files/ja/web/css/css_positioning/understanding_z_index/index.html @@ -0,0 +1,49 @@ +--- +title: CSS の z-index を理解する +slug: Web/CSS/CSS_Positioning/Understanding_z_index +tags: + - Advanced + - CSS + - Guide + - Reference + - Understanding_CSS_z-index + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +<div>{{cssref}}</div> + +<p>最も基本的な場合では、 <a href="/ja/docs/Web/HTML">HTML</a> のページは二次元であると考えることができ、テキスト、画像、その他の要素が重なることなくページに並べられます。この場合、単一のレンダリングの流れがあり、すべての要素で他の要素との間で取る間隔が分かっています。<span class="seoSummary"> {{cssxref("z-index")}} 属性で、コンテンツの描画時にオブジェクトの重なり合いの順番を調整することができます。</span></p> + +<blockquote> +<p><em>CSS 2.1 では、各ボックスは三次元空間の座標を持ちます。ボックスは、水平方向と垂直方向に加えて、垂直方向の "z 軸" に沿って配置され、その中で一番上の1つが整形されます。 Z 軸の位置は、特にボックス同士が視覚的に重なる場合に関係します。</em></p> +</blockquote> + +<p>(<a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a> より)</p> + +<p>これは、 CSS のスタイル規則によって、ボックスを通常の描画レイヤー (レイヤー 0) 以外のレイヤーに配置できるということです。各レイヤーの Z 位置は、描画処理の重ね合わせ順を示す整数値で表現されます。数値が大きいほど、見ている人に近いことになります。 Z 位置は CSS の <code>z-index</code> プロパティで制御できます。</p> + +<p><code>z-index</code> を使うのは非常に簡単に見えます。単一のプロパティに、単一の整数値を割り当て、分かりやすい振舞いをします。しかし、 <code>z-index</code> を HTML 要素の複雑な階層に適用するとき、その振舞いは理解や予測がしづらくなることがあります。これは重ね合わせの規則が複雑であるためです。実際、 CSS 仕様書ではこれらの規則をもっと分かりやすく説明するために、専用の章である <a class="external" href="http://www.w3.org/TR/CSS21/zindex.html">CSS-2.1 Appendix E</a> が占められています。</p> + +<p>この記事では、単純化といくつかの例によって、こうした規則の説明を行なってみます。</p> + +<ol> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index"><code>z-index</code> なしの重ね合わせ</a>: 既定の重ね合わせ規則</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">浮動ブロックの重ね合わせ</a>: 浮動要素が重ね合わせでどのように扱われるか</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">z-index の使用</a>: <code>z-index</code> を使って既定の重ね合わせ変更する方法</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>: 重ね合わせコンテキストについてのメモ</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">重ね合わせコンテキストの例 1</a>: 2階層の HTML 構造で、最終階層の <code>z-index</code></li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">重ね合わせコンテキストの例 2</a>: 2階層の HTML 構造、全レベルの <code>z-index</code></li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">重ね合わせコンテキストの例 3</a>: 3階層の HTML 構造、第2階層の <code>z-index</code></li> +</ol> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">原典情報</h2> + +<ul> + <li>原著者: Paolo Lombardi</li> + <li>この記事は原著者が <a class="external" href="http://www.yappy.it">YappY</a> のためにイタリア語で書いた記事の英訳の邦訳です。<a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> の条件に従う限り、全内容の共有を認めます。</li> + <li>最終更新日: 2005年7月9日</li> +</ul> + +<p><small><em>著者のメモ: Wladimir Palant と Rod Whiteley、レビューありがとう。</em></small></p> +</div> diff --git a/files/ja/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html b/files/ja/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html new file mode 100644 index 0000000000..375d11f2a4 --- /dev/null +++ b/files/ja/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html @@ -0,0 +1,148 @@ +--- +title: 浮動ブロックの重ね合わせ +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +tags: + - Advanced + - CSS + - Guide + - Reference + - Understanding_CSS_z-index + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +--- +<div>{{cssref}}</div> + +<p><ruby>浮動<rp> (</rp><rt>floated</rt><rp>) </rp></ruby>ブロックについては、重ね合わせ順序が少し異なります。浮動ブロックは位置指定なしのブロックと位置指定ブロックの間に配置されます。</p> + +<ol> + <li>ルート要素の背景と境界</li> + <li><a href="/ja/docs/Web/CSS/position#static">位置指定なし</a>のブロックの子孫、 HTML 内での出現順</li> + <li><em>浮動ブロック</em></li> + <li><a href="/ja/docs/Web/CSS/position#Types_of_positioning">位置指定</a>要素、 HTML 内での出現順</li> +</ol> + +<p>実際、以下の例に見られるように、位置指定なしのブロック (DIV #4) の背景と境界は、完全に浮動ブロックの影響を受けませんが、内容は影響を受けます。この挙動は、上記のリストに規則を追加することで示すことができます。</p> + +<ol> + <li>ルート要素の背景と境界</li> + <li><a href="/ja/docs/Web/CSS/position#static">位置指定なし</a>のブロックの子孫、 HTML 内での出現順</li> + <li>浮動ブロック</li> + <li><em><a href="/ja/docs/Web/CSS/position#static">位置指定なし</a>のインライン要素の子孫</em></li> + <li><a href="/ja/docs/Web/CSS/position#Types_of_positioning">位置指定</a>要素、 HTML 内での出現順</li> +</ol> + +<p>{{EmbedLiveSample("Source_code_for_the_example", 600, 250)}}</p> + +<div class="note"> +<p><strong>注:</strong> 位置指定なしのブロック (DIV #4) の <code>opacity</code> の値を変更すると、そのブロックの背景と境界が、浮動ブロックや位置指定ブロックの上に飛び出し、おかしな結果になります。これは、仕様書の中で、 <code>opacity</code> の値を適用すると新しい重ね合わせコンテキストを作成するという、奇妙な部分によるものです (<a href="https://philipwalton.com/articles/what-no-one-told-you-about-z-index/">What No One Told You About Z-Index</a> を参照してください)。</p> +</div> + +<h2 id="Source_code_for_the_example" name="Source_code_for_the_example">例のソースコード</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div id="abs1"> + <b>DIV #1</b><br />position: absolute;</div> + +<div id="flo1"> + <b>DIV #2</b><br />float: left;</div> + +<div id="flo2"> + <b>DIV #3</b><br />float: right;</div> + +<br /> + +<div id="sta1"> + <b>DIV #4</b><br />no positioning</div> + +<div id="abs2"> + <b>DIV #5</b><br />position: absolute;</div> + +<div id="rel1"> + <b>DIV #6</b><br />position: relative;</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">div { + padding: 10px; + text-align: center; +} + +b { + font-family: sans-serif; +} + +#abs1 { + position: absolute; + width: 150px; + height: 200px; + top: 10px; + right: 140px; + border: 1px dashed #900; + background-color: #fdd; +} + +#sta1 { + height: 100px; + border: 1px dashed #996; + background-color: #ffc; + margin: 0px 10px 0px 10px; + text-align: left; +} + +#flo1 { + margin: 0px 10px 0px 20px; + float: left; + width: 150px; + height: 200px; + border: 1px dashed #090; + background-color: #cfc; +} + +#flo2 { + margin: 0px 20px 0px 10px; + float: right; + width: 150px; + height: 200px; + border: 1px dashed #090; + background-color: #cfc; +} + +#abs2 { + position: absolute; + width: 150px; + height: 100px; + top: 80px; + left: 100px; + border: 1px dashed #990; + background-color: #fdd; +} + +#rel1 { + position: relative; + border: 1px dashed #996; + background-color: #cff; + margin: 0px 10px 0px 10px; + text-align: left; +} </pre> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">z-index なしの重ね合わせ</a>: <code>z-index</code> が使用されない場合の重ね合わせ規則</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">z-index の使用</a>: <code>z-index</code> を使って既定の重ね合わせ変更する方法</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>: 重ね合わせコンテキストについてのメモ</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">重ね合わせコンテキストの例 1</a>: 2階層の HTML 構造で、最終階層の z-index</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">重ね合わせコンテキストの例 2</a>: 2階層の HTML 構造、全レベルの z-index</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">重ね合わせコンテキストの例 3</a>: 3階層の HTML 構造、第2階層の z-index</li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">原典情報</h2> + +<ul> + <li>原著者: Paolo Lombardi</li> + <li>この記事は原著者が <a class="external" href="http://www.yappy.it">YappY</a> のためにイタリア語で書いた記事の英訳の邦訳です。<a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> の条件に従う限り、全内容の共有を認めます。</li> + <li>最終更新日: 2014 年 11 月 3 日</li> +</ul> +</div> diff --git a/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html new file mode 100644 index 0000000000..430a63eca1 --- /dev/null +++ b/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html @@ -0,0 +1,138 @@ +--- +title: 重ね合わせコンテキストの例 1 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +tags: + - Advanced + - CSS + - Guide + - Understanding_CSS_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +--- +<div>{{cssref}}</div> + +<p>« <a href="/ja/docs/Web/CSS">CSS</a> « <a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index">CSS の z-index を理解する</a></p> + +<h2 id="Stacking_context_example_1" name="Stacking_context_example_1">重ね合わせコンテキストの例 1</h2> + +<p>基礎的な例から始めましょう。ルートの重ね合わせコンテキストに、2つの DIV (DIV #1 と DIV #3) があって、どちらも relative の位置指定がされていますが、 z-index プロパティの指定はありません。 DIV #1 の中に absolute の位置指定がされた DIV #2 があり、一方 DIV #3 の中には absolute の位置指定がされた DIV #4 があります。どちらも z-index プロパティの指定はありません。</p> + +<p>唯一の重ね合わせコンテキストはルート要素にあります。 z-indexe がなければ要素は出現した順に重なります。</p> + +<p><img alt="重ね合わせコンテキストの例 1" class="internal" src="/@api/deki/files/914/=Understanding_zindex_05a.png"></p> + +<p>DIV #2 に正の (ゼロでなく auto でもない) z-index 値が代入されれば、他のどの DIV よりも上に描画されます。</p> + +<p><img alt="重ね合わせコンテキストの例 1" class="internal" src="/@api/deki/files/915/=Understanding_zindex_05b.png"></p> + +<p>さらにまた、DIV #4 に DIV #2 のものより大きな正の z-index が代入されれば、DIV #4 は、DIV #2を含む他のどの要素よりも上に描画されます。</p> + +<p><img alt="重ね合わせコンテキストの例 1" class="internal" src="/@api/deki/files/916/=Understanding_zindex_05c.png"></p> + +<p>最後に見た例では、 DIV #2 と DIV #4 が兄弟要素ではないことがわかります。これは、HTML 要素の階層構造においては、それぞれ別の親要素を持っているからです。そうだとしても、DIV #4 と DIV #2 間の重なり順は、z-index を使って制御できます。たまたま、DIV #1 と DIV #3 には z-index 値が代入されていなかったため、重ね合わせコンテキストを作らなかったのです。これは、DIV #2 と DIV #3 を含むそれら要素の中身がどれも、同一のルートの重ね合わせコンテキストに含まれるということです。</p> + +<p>重ね合わせコンテキストの見地からは、DIV #1 と DIV #3 は単にルート要素に吸収され、結果の階層構造は次のようになっています:</p> + +<ul> + <li>ルートの重ね合わせコンテキスト + <ul> + <li>DIV #2 (z-index 1)</li> + <li>DIV #4 (z-index 2)</li> + </ul> + </li> +</ul> + +<div class="note"><strong>注:</strong> DIV #1 と DIV #3 は半透明ではありません。位置指定された要素に1未満の不透明度を与えると、ちょうど z-index 値を追加したのと同じように、暗黙的に重ね合わせコンテキストが作られることを忘れないのは大切です。また、この例は、親要素が重ね合わせコンテキストを作らないときに、何が起こるのかを示しています。</div> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div id="div1"> +<br /><span class="bold">DIV #1</span> +<br />position: relative; + <div id="div2"> + <br /><span class="bold">DIV #2</span> + <br />position: absolute; + <br />z-index: 1; + </div> +</div> + +<br /> + +<div id="div3"> +<br /><span class="bold">DIV #3</span> +<br />position: relative; + <div id="div4"> + <br /><span class="bold">DIV #4</span> + <br />position: absolute; + <br />z-index: 2; + </div> +</div> + +</body></html> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">.bold { + font-weight: bold; + font: 12px Arial; +} +#div1, +#div3 { + height: 80px; + position: relative; + border: 1px dashed #669966; + background-color: #ccffcc; + padding-left: 5px; +} +#div2 { + opacity: 0.8; + z-index: 1; + position: absolute; + width: 150px; + height: 200px; + top: 20px; + left: 170px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} +#div4 { + opacity: 0.8; + z-index: 2; + position: absolute; + width: 200px; + height: 70px; + top: 65px; + left: 50px; + border: 1px dashed #000099; + background-color: #ddddff; + text-align: left; + padding-left: 10px; +}</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index"><code>z-index</code> なしの重ね合わせ</a>: 既定の重ね合わせ規則</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">浮動ブロックの重ね合わせ</a>: 浮動要素が重ね合わせでどのように扱われるか</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">z-index の使用</a>: <code>z-index</code> を使って既定の重ね合わせ変更する方法</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>: 重ね合わせコンテキストについてのメモ</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">重ね合わせコンテキストの例 2</a>: 2階層の HTML 構造、全レベルの <code>z-index</code></li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">重ね合わせコンテキストの例 3</a>: 3階層の HTML 構造、第2階層の <code>z-index</code></li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">原典情報</h2> + +<ul> + <li>原著者: Paolo Lombardi</li> + <li>この記事は原著者が <a class="external" href="http://www.yappy.it">YappY</a> のためにイタリア語で書いた記事の英訳の邦訳です。<a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> の条件に従う限り、全内容の共有を認めます。</li> + <li>最終更新日: 2005年7月9日</li> +</ul> +</div> diff --git a/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html b/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html new file mode 100644 index 0000000000..a99befee8d --- /dev/null +++ b/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html @@ -0,0 +1,143 @@ +--- +title: 重ね合わせコンテキストの例 2 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +tags: + - Advanced + - CSS + - Guide + - Understanding_CSS_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +--- +<div>{{cssref}}</div> + +<p>« <a href="/ja/docs/Web/CSS">CSS</a> « <a href="/ja/docs/Web/CSS/Understanding_z_index">CSS の z-index を理解する</a></p> + +<h2 id="Stacking_context_example_2" name="Stacking_context_example_2">重ね合わせコンテキストの例 2</h2> + +<p>これはとても簡単な例ですが、<em>重ね合わせコンテキスト</em>の概念を理解するカギになります。前の例には同じ 4 つの DIV 要素がありましたが、今度は両方の階層構造で <code>z-index</code> プロパティが設定されています。</p> + +<p>{{ EmbedLiveSample('Example_source_code', '352', '270') }}</p> + +<p>DIV #2 (z-index: 2) が DIV #3 (z-index: 1) よりも上にあることがわかります。これは、どちらも同じ重ね合わせコンテキスト（ルートのもの）に属していて、z-index 値が要素の重なり方を決めているからです。</p> + +<p>変に思えるかもしれないのは、<code>z-index</code> の値に関わらず、DIV #2 (z-index: 2) が DIV #4 (z-index: 10) よりも上にあることです。この理由は、これらの要素が同一の重ね合わせコンテキストに属していないためです。DIV #4 は DIV #3 によって作られた重ね合わせコンテキストに所属していて、以前の説明にあるように DIV #3 (とその内部にあるものすべて) は DIV #2 よりも下にあります。</p> + +<p>状況をもっとよく理解するために、重ね合わせコンテキストの階層構造をご覧ください:</p> + +<ul> + <li>ルートの重ね合わせコンテキスト + <ul> + <li>DIV #2 (z-index 2)</li> + <li>DIV #3 (z-index 1) + <ul> + <li>DIV #4 (z-index 10)</li> + </ul> + </li> + </ul> + </li> +</ul> + +<div class="note"><strong>注:</strong> 一般に、 HTML の階層構造は重ね合わせコンテキストの階層構造と異なることを忘れないほうが良いでしょう。重ね合わせコンテキストの階層構造では、重ね合わせコンテキストを作らない要素はその親要素に吸収されます。</div> + +<h2 id="Example_source_code" name="Example_source_code">例のソースコード</h2> + +<pre class="brush: html notranslate"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> +<head><style type="text/css"> + +div { font: 12px Arial; } + +span.bold { font-weight: bold; } + +#div2 { z-index: 2; } +#div3 { z-index: 1; } +#div4 { z-index: 10; } + +#div1,#div3 { + height: 80px; + position: relative; + border: 1px dashed #669966; + background-color: #ccffcc; + padding-left: 5px; +} + +#div2 { + opacity: 0.8; + position: absolute; + width: 150px; + height: 200px; + top: 20px; + left: 170px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +#div4 { + opacity: 0.8; + position: absolute; + width: 200px; + height: 70px; + top: 65px; + left: 50px; + border: 1px dashed #000099; + background-color: #ddddff; + text-align: left; + padding-left: 10px; +} + + +</style></head> + +<body> + + <br /> + + <div id="div1"><br /> + <span class="bold">DIV #1</span><br /> + position: relative; + <div id="div2"><br /> + <span class="bold">DIV #2</span><br /> + position: absolute;<br /> + z-index: 2; + </div> + </div> + + <br /> + + <div id="div3"><br /> + <span class="bold">DIV #3</span><br /> + position: relative;<br /> + z-index: 1; + <div id="div4"><br /> + <span class="bold">DIV #4</span><br /> + position: absolute;<br /> + z-index: 10; + </div> + </div> + +</body> +</html> +</pre> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index"><code>z-index</code> なしの重ね合わせ</a>: 既定の重ね合わせ規則</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">浮動ブロックの重ね合わせ</a>: 浮動要素が重ね合わせでどのように扱われるか</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">z-index の使用</a>: <code>z-index</code> を使って既定の重ね合わせ変更する方法</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>: 重ね合わせコンテキストについてのメモ</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">重ね合わせコンテキストの例 1</a>: 2階層の HTML 構造で、最終階層の <code>z-index</code></li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">重ね合わせコンテキストの例 3</a>: 3階層の HTML 構造、第2階層の <code>z-index</code></li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">原典情報</h2> + +<ul> + <li>原著者: Paolo Lombardi</li> + <li>この記事は原著者が <a class="external" href="http://www.yappy.it">YappY</a> のためにイタリア語で書いた記事の英訳の邦訳です。<a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> の条件に従う限り、全内容の共有を認めます。</li> + <li>最終更新日: 2005年7月9日</li> +</ul> +</div> diff --git a/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html b/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html new file mode 100644 index 0000000000..ab325c9242 --- /dev/null +++ b/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html @@ -0,0 +1,191 @@ +--- +title: 重ね合わせコンテキストの例 3 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +tags: + - Advanced + - CSS + - Guide + - Understanding_CSS_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +--- +<div>{{cssref}}</div> + +<p>« <a href="/ja/docs/Web/CSS">CSS</a> « <a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index">CSS の z-index を理解する</a></p> + +<h2 id="Stacking_context_example_3" name="Stacking_context_example_3">重ね合わせコンテキストの例 3</h2> + +<p>この最後の例では、複数の階層を持つ HTML 構造内で、位置指定された要素を組み合わせたときと、 <code>z-index</code> がクラスセレクターを使って設定されたとき、発生する問題を示します。</p> + +<p>位置指定された DIV 要素で作られた、三階層の階層メニューを一例として見てみましょう。第二階層と第三階層の DIV 要素は、マウスが親要素をホバーしたり、クリックしたりすると現れます。通常この種類のメニューはクライアントサイドかサーバーサイドのどちらかでスクリプトにより生成されます。このためスタイルルールは id セレクターではなく、クラスセレクターで割り当てられます。</p> + +<p>もし 3 つのメニュー階層が部分的に重なると、重なりの管理が問題になるかもしれません。</p> + +<p>{{ EmbedLiveSample('Example_source_code', '320', '330') }}</p> + +<p>第一階層のメニューは relative で位置指定されているだけなので、重ね合わせコンテキストは作られません。</p> + +<p>第二階層のメニューは、親要素内で absolute で位置指定されています。これを第一階層のすべてのメニューより上に置くために、<code>z-index</code> が使われています。問題は第二階層のメニューそれぞれに重ね合わせコンテキストが作られることと、第三階層のメニューが自分の親要素に属していることです。</p> + +<p>したがって第三階層のメニューは後ろにある第二階層のメニューより下に重なりますが、これは第二階層のメニューがすべて同一の <code>z-index</code> 値を持っていて、デフォルトの重ね合わせ規則が適用されるからです。</p> + +<p>状況をもっとよく理解できるよう、重ね合わせコンテキストの階層図を用意しました。</p> + +<ul> + <li>ルートの重ね合わせコンテキスト + <ul> + <li>LEVEL #1 + <ul> + <li>LEVEL #2 (z-index: 1) + <ul> + <li>LEVEL #3</li> + <li>...</li> + <li>LEVEL #3</li> + </ul> + </li> + <li>LEVEL #2 (z-index: 1)</li> + <li>...</li> + <li>LEVEL #2 (z-index: 1)</li> + </ul> + </li> + <li>LEVEL #1</li> + <li>...</li> + <li>LEVEL #1</li> + </ul> + </li> +</ul> + +<p>この問題を回避するには、異なるレベル間のメニューの重なりを取り除くか、独自 (で異なった) <code>z-index</code> 値を クラスセレクターではなく ID セレクターを通じて設定するか、 HTML の階層構造をなくすかしてください。</p> + +<div class="note"><strong>注:</strong> ソースコードを見ると、absolute で位置指定されたコンテナーとなる要素内に、第二階層と第三階層のメニューを作る DIV があることがわかります。この方法は、一度にすべてをグループ化し、位置づけするのに便利です。</div> + +<h2 id="Example_source_code" name="Example_source_code">例のソースコード</h2> + +<pre class="brush: html notranslate"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> +<head><style type="text/css"> + +div { font: 12px Arial; } + +span.bold { font-weight: bold; } + +div.lev1 { + width: 250px; + height: 70px; + position: relative; + border: 2px outset #669966; + background-color: #ccffcc; + padding-left: 5px; +} + +#container1 { + z-index: 1; + position: absolute; + top: 30px; + left: 75px; +} + +div.lev2 { + opacity: 0.9; + width: 200px; + height: 60px; + position: relative; + border: 2px outset #990000; + background-color: #ffdddd; + padding-left: 5px; +} + +#container2 { + z-index: 1; + position: absolute; + top: 20px; + left: 110px; +} + +div.lev3 { + z-index: 10; + width: 100px; + position: relative; + border: 2px outset #000099; + background-color: #ddddff; + padding-left: 5px; +} + +</style></head> + +<body> + +<br /> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> + + <div id="container1"> + + <div class="lev2"> + <br /><span class="bold">LEVEL #2</span> + <br />z-index: 1; + + <div id="container2"> + + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + + </div> + + </div> + + <div class="lev2"> + <br /><span class="bold">LEVEL #2</span> + <br />z-index: 1; + </div> + + </div> +</div> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> +</div> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> +</div> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> +</div> + +</body></html> +</pre> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index"><code>z-index</code> なしの重ね合わせ</a>: 既定の重ね合わせ規則</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">浮動ブロックの重ね合わせ</a>: 浮動要素が重ね合わせでどのように扱われるか</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">z-index の使用</a>: <code>z-index</code> を使って既定の重ね合わせ変更する方法</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>: 重ね合わせコンテキストについてのメモ</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">重ね合わせコンテキストの例 1</a>: 2階層の HTML 構造で、最終階層の <code>z-index</code></li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">重ね合わせコンテキストの例 2</a>: 2階層の HTML 構造、全レベルの <code>z-index</code></li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">原典情報</h2> + +<ul> + <li>原著者: Paolo Lombardi</li> + <li>この記事は原著者が <a class="external" href="http://www.yappy.it">YappY</a> のためにイタリア語で書いた記事の英訳の邦訳です。<a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> の条件に従う限り、全内容の共有を認めます。</li> + <li>最終更新日: 2005年7月9日</li> +</ul> +</div> + +<p><strong>注</strong>: 実は、サンプル画像は間違っているようです。第二階層が第三階層に重複しているのは、第二階層が半透明であるため、新しい重ね合わせコンテキストが作成されるからです。基本的に、このサンプルページ全体が誤っており、誤解を招きます。</p> diff --git a/files/ja/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/ja/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html new file mode 100644 index 0000000000..b076f8b7c2 --- /dev/null +++ b/files/ja/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html @@ -0,0 +1,127 @@ +--- +title: z-index なしの重ね合わせ +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +tags: + - Advanced + - CSS + - Guide + - Reference + - Understanding_CSS_z-index + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +--- +<div>{{cssref}}</div> + +<p>どの要素にも {{cssxref("z-index")}} プロパティが指定されていない場合、要素は以下の順序に (下から上に) 重ね合わせられます。</p> + +<ol> + <li>ルート要素の背景と境界</li> + <li><a href="/ja/docs/Web/CSS/position#static">位置指定なしの</a>ブロックの子孫、 HTML 内での出現順</li> + <li><a href="/ja/docs/Web/CSS/position#Types_of_positioning">位置指定</a>要素、 HTML 内での出現順</li> +</ol> + +<p>{{cssxref("order")}} プロパティによって {{cssxref("flex")}} コンテナーの中の描画を「HTML の中での出現順」から変更したとき、重ね合わせコンテキストの順も同様に影響することを意識しておいて下さい。</p> + +<p>以下の例では、 #1 から #4 までの要素が位置指定要素です。 #5 の要素は static であり、 HTML マークアップの中で後に来ていたとしても、他の4つの要素の下に描かれます。</p> + +<p>{{EmbedLiveSample("Source_code_for_the_example", 600, 400)}}</p> + +<h2 id="Source_code_for_the_example" name="Source_code_for_the_example">例のソースコード</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div id="abs1" class="absolute"> + <b>DIV #1</b><br />position: absolute;</div> +<div id="rel1" class="relative"> + <b>DIV #2</b><br />position: relative;</div> +<div id="rel2" class="relative"> + <b>DIV #3</b><br />position: relative;</div> +<div id="abs2" class="absolute"> + <b>DIV #4</b><br />position: absolute;</div> +<div id="sta1" class="static"> + <b>DIV #5</b><br />position: static;</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">b { + font-family: sans-serif; +} + +div { + padding: 10px; + border: 1px dashed; + text-align: center; +} + +.static { + position: static; + height: 80px; + background-color: #ffc; + border-color: #996; +} + +.absolute { + position: absolute; + width: 150px; + height: 350px; + background-color: #fdd; + border-color: #900; + opacity: 0.7; +} + +.relative { + position: relative; + height: 80px; + background-color: #cfc; + border-color: #696; + opacity: 0.7; +} + +#abs1 { + top: 10px; + left: 10px; +} + +#rel1 { + top: 30px; + margin: 0px 50px 0px 50px; +} + +#rel2 { + top: 15px; + left: 20px; + margin: 0px 50px 0px 50px; +} + +#abs2 { + top: 10px; + right: 10px; +} + +#sta1 { + background-color: #ffc; + margin: 0px 50px 0px 50px; +} +</pre> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">浮動ブロックの重ね合わせ</a>: 浮動要素が重ね合わせでどのように扱われるか</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">z-index の追加</a>: <code>z-index</code> を使って既定の重ね合わせ変更する方法</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>: 重ね合わせコンテキストについてのメモ</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">重ね合わせコンテキストの例 1</a>: 2階層の HTML 構造で、最終階層の z-index</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">重ね合わせコンテキストの例 2</a>: 2階層の HTML 構造、全レベルの z-index</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">重ね合わせコンテキストの例 3</a>: 3階層の HTML 構造、第2階層の z-index</li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">原典情報</h2> + +<ul> + <li>原著者: Paolo Lombardi</li> + <li>この記事は原著者が <a class="external" href="http://www.yappy.it">YappY</a> のためにイタリア語で書いた記事の英訳の邦訳です。<a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> の条件に従う限り、全内容の共有を認めます。</li> + <li>最終更新日: 2014 年 11 月 3 日</li> +</ul> +</div> diff --git a/files/ja/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/ja/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html new file mode 100644 index 0000000000..57daec3c78 --- /dev/null +++ b/files/ja/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -0,0 +1,241 @@ +--- +title: 重ね合わせコンテキスト +slug: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +tags: + - Advanced + - CSS + - Reference + - z-index + - ガイド +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +--- +<div>{{cssref}}</div> + +<p><ruby><strong>重ね合わせコンテキスト</strong><rp> (</rp><rt>Stacking context</rt><rp>) </rp></ruby>は、ビューポートまたはウェブページに面していると想定されるユーザーに対する仮想的な Z 軸に沿って並べられた HTML 要素の三次元の概念化です。 HTML 要素は、要素の属性に基づいてこの空間を優先度つきの順序で占有します。</p> + +<h2 id="The_stacking_context" name="The_stacking_context">重ね合わせコンテキスト</h2> + +<p>この記事の前の部分である <a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">z-index の使用</a>では、ある要素の描画順はそれらの <code>z-index</code> の値に影響を受けていました。これは、要素が<em>重ね合わせコンテキスト</em>を生じさせる特別なプロパティを持っていたからです。</p> + +<p>重ね合わせコンテキストは以下のような場面で、文書の随所に様々な要素によって構成されます。</p> + +<ul> + <li>文書のルート要素 (<code><html></code>)</li> + <li>{{cssxref("position")}} の値が <code>absolute</code> または <code>relative</code> であり、かつ {{cssxref("z-index")}} の値が <code>auto</code> 以外の要素</li> + <li>{{cssxref("position")}} の値が <code>fixed</code> または <code>sticky</code> の要素 (sticky はすべてのモバイルブラウザーにありますが、古いデスクトップブラウザーにはありません)。</li> + <li>フレックス ({{cssxref("flexbox")}}) コンテナーの子であり、 {{cssxref("z-index")}} の値が <code>auto</code> 以外の要素。</li> + <li>グリッド ({{cssxref("grid")}}) コンテナーの子であり、 {{cssxref("z-index")}} の値が <code>auto</code> 以外の要素。</li> + <li>{{cssxref("opacity")}} の値が <code>1</code> 未満である要素 (<a href="http://www.w3.org/TR/css3-color/#transparency">不透明度の仕様</a>をご覧ください)。</li> + <li>{{cssxref("mix-blend-mode")}} の値が <code>normal</code> 以外の要素</li> + <li>以下のプロパティ値が <code>none</code> 以外の要素。 + <ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("filter")}}</li> + <li>{{cssxref("perspective")}}</li> + <li>{{cssxref("clip-path")}}</li> + <li>{{cssxref("mask")}} / {{cssxref("mask-image")}} / {{cssxref("mask-border")}}</li> + </ul> + </li> + <li>{{cssxref("isolation")}} の値が <code>isolate</code> である要素。</li> + <li>{{cssxref("-webkit-overflow-scrolling")}} の値が <code>touch</code> である要素。</li> + <li>{{cssxref("will-change")}} の値が、初期値以外で重ね合わせコンテキストを作成する任意のプロパティを指定している要素 (<a href="https://dev.opera.com/articles/ja/css-will-change-property/">この記事</a>を参照)。</li> + <li>{{cssxref("contain")}} の値が <code>layout</code> または <code>paint</code> であるか、これらのどちらかを含む複合値 (すなわち <code>contain: strict</code>, <code>contain: content</code>) を持つ要素。</li> +</ul> + +<p>重ね合わせコンテキストの内部で、子要素は前に説明した規則に従って重ね合わせられます。重要なのは、子要素の <code>z-index</code> 値は、その親要素に対してのみ意味を持つということです。重ね合わせコンテキストは、その親の重ね合わせコンテキストでは不可分な一つの固まりとして扱われます。</p> + +<p>まとめると、</p> + +<ul> + <li>重ね合わせコンテキストは他の重ね合わせコンテキストに含めることができ、その結果重ね合わせコンテキストの階層構造ができます。</li> + <li>重ね合わせコンテキストはすべて、その兄弟要素と完全に独立しています。重ね合わせ処理では、子孫要素だけが考慮されます。</li> + <li>重ね合わせコンテキストははめ込み式です。要素の中身が重ねられた後、その要素がまるごと、今度は親の重ね合わせコンテキストの重ね合わせ順の中にあるとみなされます。</li> +</ul> + +<div class="note"><strong>注:</strong> 重ね合わせコンテキストを作れるのが一部の要素に限定されるため、重ね合わせコンテキストは HTML 要素の階層構造の部分集合です。それ自身の重ね合わせコンテキストを作らない要素は、その親の重ね合わせコンテキストに<em>同化される</em>、と言えます。</div> + +<h2 id="The_example" name="The_example">例</h2> + +<p><img alt="Example of stacking rules modified using z-index" src="/@api/deki/files/913/=Understanding_zindex_04.png"></p> + +<p>この例では、配置要素はすべて、位置と <code>z-index</code> の値によって、それ自身の重ね合わせコンテキストを作ります。重ね合わせコンテキストの階層構造が、次のように構成されます。</p> + +<ul> + <li>ルート要素 + <ul> + <li>DIV #1</li> + <li>DIV #2</li> + <li>DIV #3 + <ul> + <li>DIV #4</li> + <li>DIV #5</li> + <li>DIV #6</li> + </ul> + </li> + </ul> + </li> +</ul> + +<p>重要なのは、 DIV #4, DIV #5, DIV #6 は DIV #3 の子要素なので、DIV #3 の内側で重なり方が完全に決まることです。一旦 DIV #3 内部の重ね合わせと描画が終われば、DIV #3 はルート要素に丸ごと渡され、兄弟要素との重ね合わせ処理が行われます。</p> + +<div class="note"> +<p><strong>注:</strong></p> + +<ul> + <li>DIV #4 は DIV #1 の下に描画されます。これは、DIV #1 の z-index (5) はルート要素の重ね合わせコンテキストでだけ有効な値で、DIV #4 の z-index (6) は DIV #3 の重ね合わせコンテキストでだけ有効な値だからです。DIV #4 は DIV #3 の内部にあり、DIV #3 は DIV #1 よりも小さな z-index 値を持っているので、DIV #4 は DIV #1 の下になります。</li> + <li>同じ理由で DIV #2 (z-index 2) は DIV #5 (z-index 1) の下に描画されます。これは DIV #5 が DIV #3 に含まれていて、DIV #3は DIV #2 より高い z-index 値を持っているからです。</li> + <li>DIV #3 の z-index は 4 ですが、この値は DIV #4、DIV #5、DIV #6 の z-index とは独立しています。異なる重ね合わせコンテキストに含まれるためです。</li> + <li>Z軸方向に重なった要素の<em>描画順序</em>の簡単な計算方法は、それがバージョン番号のようなものを持っていると考えることです。親要素のメジャーバージョン番号の下に、子要素のマイナーバージョン番号があるものとします。この方法で、 z-index 1 を持つ要素 (DIV #5) がどうやって z-index 2 を持つ要素 (DIV #2) の上になるのか、そして、 z-index 6 を持つ要素 (DIV #4) がどうやって z-index 5 を持つ要素 (DIV #1) の下になるのか、簡単にわかります。用意した例では次のようになります (以下は最終的な描画順に並べています)。 + <ul> + <li>ルート要素 + <ul> + <li>DIV #2 - z-index は 2</li> + <li>DIV #3 - z-index は 4 + <ul> + <li>DIV #5 - z-index は 1、描画順は 4.1 なので、 z-index が 4 である要素の下に重なる</li> + <li>DIV #6 - z-index は 3、描画順は 4.3 なので、 z-index が 4 である要素の下に重なる</li> + <li>DIV #4 - z-index は 6、描画順は 4.6 なので、 z-index が 4 である要素の下に重なる</li> + </ul> + </li> + <li>DIV #1 - z-index は 5</li> + </ul> + </li> + </ul> + </li> +</ul> +</div> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div id="div1"> + <h1>Division Element #1</h1> + <code>position: relative;<br/> + z-index: 5;</code> +</div> + +<div id="div2"> + <h1>Division Element #2</h1> + <code>position: relative;<br/> + z-index: 2;</code> +</div> + +<div id="div3"> + <div id="div4"> + <h1>Division Element #4</h1> + <code>position: relative;<br/> + z-index: 6;</code> + </div> + + <h1>Division Element #3</h1> + <code>position: absolute;<br/> + z-index: 4;</code> + + <div id="div5"> + <h1>Division Element #5</h1> + <code>position: relative;<br/> + z-index: 1;</code> + </div> + + <div id="div6"> + <h1>Division Element #6</h1> + <code>position: absolute;<br/> + z-index: 3;</code> + </div> +</div> +</pre> + +<h3 id="Division_Element_.231" name="Division_Element_.231">CSS</h3> + +<pre class="brush: css notranslate">* { + margin: 0; +} +html { + padding: 20px; + font: 12px/20px Arial, sans-serif; +} +div { + opacity: 0.7; + position: relative; +} +h1 { + font: inherit; + font-weight: bold; +} +#div1, +#div2 { + border: 1px dashed #696; + padding: 10px; + background-color: #cfc; +} +#div1 { + z-index: 5; + margin-bottom: 190px; +} +#div2 { + z-index: 2; +} +#div3 { + z-index: 4; + opacity: 1; + position: absolute; + top: 40px; + left: 180px; + width: 330px; + border: 1px dashed #900; + background-color: #fdd; + padding: 40px 20px 20px; +} +#div4, +#div5 { + border: 1px dashed #996; + background-color: #ffc; +} +#div4 { + z-index: 6; + margin-bottom: 15px; + padding: 25px 10px 5px; +} +#div5 { + z-index: 1; + margin-top: 15px; + padding: 5px 10px; +} +#div6 { + z-index: 3; + position: absolute; + top: 20px; + left: 180px; + width: 150px; + height: 125px; + border: 1px dashed #009; + padding-top: 125px; + background-color: #ddf; + text-align: center; +}</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{ EmbedLiveSample('Example', '100%', '396') }}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index"><code>z-index</code> なしの重ね合わせ</a>: 既定の重ね合わせ規則</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">浮動ブロックの重ね合わせ</a>: 浮動要素が重ね合わせでどのように扱われるか</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index"><code>z-index</code> の使用</a>: z-index を使って既定の重ね合わせ変更する方法</li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">重ね合わせコンテキストの例 1</a>: 2階層の HTML 構造で、最終階層の <code>z-index</code></li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">重ね合わせコンテキストの例 2</a>: 2階層の HTML 構造、全レベルの <code>z-index</code></li> + <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">重ね合わせコンテキストの例 3</a>: 3階層の HTML 構造、第2階層の <code>z-index</code></li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">原典情報</h2> + +<ul> + <li>原著者: Paolo Lombardi</li> + <li>この記事は原著者が <a class="external" href="http://www.yappy.it">YappY</a> のためにイタリア語で書いた記事の英訳の邦訳です。<a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> の条件に従う限り、全内容の共有を認めます。</li> + <li>最終更新日: 2005年7月9日</li> +</ul> +</div> |