diff options
| author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
|---|---|---|
| committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
| commit | 310fd066e91f454b990372ffa30e803cc8120975 (patch) | |
| tree | d5d900deb656a5da18e0b60d00f0db73f3a2e88e /files/zh-cn/web/css/css_positioning | |
| parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
| download | translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.gz translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.bz2 translated-content-310fd066e91f454b990372ffa30e803cc8120975.zip | |
unslug zh-cn: move
Diffstat (limited to 'files/zh-cn/web/css/css_positioning')
8 files changed, 1229 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/zh-cn/web/css/css_positioning/understanding_z_index/adding_z-index/index.html new file mode 100644 index 0000000000..acd3b034ce --- /dev/null +++ b/files/zh-cn/web/css/css_positioning/understanding_z_index/adding_z-index/index.html @@ -0,0 +1,158 @@ +--- +title: Adding z-index +slug: Web/Guide/CSS/Understanding_z_index/Adding_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +--- +<p>« <a href="/en/CSS" title="CSS">CSS</a> «<a href="/en/CSS/Understanding_z-index" style="font-size: 14px; line-height: 1.5;" title="Understanding CSS z-index"><span class="title" style="display: inline !important;">理解z-index</span></a></p> +<h3 id="使用_cssxref(z-index)">使用 {{ cssxref("z-index") }}</h3> +<p>在第一个例子 <a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a>中， 我们描述了默认的摆放顺序。 当你需要指定不同的排列顺序时， 只要给元素指定一个z-index的数值就可以了。 </p> +<p> </p> +<p><span style="font-size: 14px; line-height: 1.5;">该属性必须是整数(正负均可)， 它体现了元素在z轴的位置。 如果你对z轴体系不了解， 你也可以把它理解成“层叠”， 每个层都有一个顺序数， 顺序数大的层在上面， 小的在下面。 </span></p> +<p><strong>注意！z-index只对指定了</strong> <a href="/en/CSS/position" title="position">positioned</a><strong>属性的元素有效。</strong></p> +<ul> + <li><em>底层: 距离观察者最远</em></li> + <li>...</li> + <li> -3 层</li> + <li> -2 层</li> + <li> -1 层</li> + <li> 0 层 <em>默认层</em></li> + <li> 1 层</li> + <li> 2 层</li> + <li> 3 层</li> + <li>...</li> + <li><em>顶部: 最接近观察者</em></li> +</ul> +<div class="note"> + <p><strong>注释:</strong></p> + <ul> + <li>当没有指定z-index的时候， 所有元素都在会被渲染在默认层(0层)</li> + <li>当多个元素的z-index属性相同的时候(在同一个层里面)，那么将按照 <a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="Stacking without z-index">Stacking without z-index</a> 中描述的规则进行布局。 </li> + </ul> +</div> +<p>在下一个例子中， 所有的层都是用z-index进行排序的。 元素div#5 的z-index无效， 因为他没有被指定position属性。 </p> +<p><img alt="Example of stacking rules modified using z-index" class="internal" src="/@api/deki/files/912/=Understanding_zindex_03.png"></p> +<h3 id="Example_source_code"><strong>Example source code</strong></h3> +<pre class="brush: html"><!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 { + opacity: 0.7; + font: 12px Arial; +} + +span.bold { font-weight: bold; } + +#normdiv { + z-index: 8; + height: 70px; + border: 1px dashed #999966; + background-color: #ffffcc; + margin: 0px 50px 0px 50px; + text-align: center; +} + +#reldiv1 { + z-index: 3; + height: 100px; + position: relative; + top: 30px; + border: 1px dashed #669966; + background-color: #ccffcc; + margin: 0px 50px 0px 50px; + text-align: center; +} + +#reldiv2 { + z-index: 2; + height: 100px; + position: relative; + top: 15px; + left: 20px; + border: 1px dashed #669966; + background-color: #ccffcc; + margin: 0px 50px 0px 50px; + text-align: center; +} + +#absdiv1 { + z-index: 5; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + left: 10px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +#absdiv2 { + z-index: 1; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + right: 10px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +</style></head> + +<body> + +<br /><br /> + +<div id="absdiv1"> + <br /><span class="bold">DIV #1</span> + <br />position: absolute; + <br />z-index: 5; +</div> + +<div id="reldiv1"> + <br /><span class="bold">DIV #2</span> + <br />position: relative; + <br />z-index: 3; +</div> + +<div id="reldiv2"> + <br /><span class="bold">DIV #3</span> + <br />position: relative; + <br />z-index: 2; +</div> + +<div id="absdiv2"> + <br /><span class="bold">DIV #4</span> + <br />position: absolute; + <br />z-index: 1; +</div> + +<div id="normdiv"> + <br /><span class="bold">DIV #5</span> + <br />no positioning + <br />z-index: 8; +</div> + +</body></html> +</pre> +<h3 id="See_also">See also</h3> +<ul> + <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li> + <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li> +</ul> +<div class="originaldocinfo"> + <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + <ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: July 9th, 2005</li> + </ul> +</div> +<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Ajout_de_z-index" } ) }}</p> diff --git a/files/zh-cn/web/css/css_positioning/understanding_z_index/index.html b/files/zh-cn/web/css/css_positioning/understanding_z_index/index.html new file mode 100644 index 0000000000..19f49650d1 --- /dev/null +++ b/files/zh-cn/web/css/css_positioning/understanding_z_index/index.html @@ -0,0 +1,47 @@ +--- +title: 理解CSS的 z-index属性 +slug: Web/Guide/CSS/Understanding_z_index +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +<p>{{cssref}}</p> + +<p><span style="line-height: inherit;">通常情况下，<a href="/zh-CN/docs/Glossary/HTML">HTML</a>页面可以被认为是二维的，因为文本，图像和其他元素被排列在页面上而不重叠。在这种情况下，只有一个渲染进程，所有元素都知道其他元素所占用的空间。 </span>{{cssxref("z-index")}}<span style="line-height: inherit;">属性可让你在渲染内容时调整对象分层的顺序。</span></p> + +<blockquote> +<p><em>在 CSS 2.1 中, 所有的盒模型元素都处于三维坐标系中。 除了我们常用的横坐标和纵坐标， 盒模型元素还可以沿着“z 轴”层叠摆放， 当他们相互覆盖时， 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 允许你在现有的渲染引擎上层叠的摆放盒模型元素。 所有的层都可以用一个整数( z 轴顺序)来表明当前层在 z 轴的位置。 数字越大， 元素越接近观察者。Z 轴顺序用 CSS 的 <span style="line-height: inherit;">{{ cssxref("z-index") }} 属性来指定。</span></p> + +<p>使用 <code>z-index</code> 很简单： 给它指定一个整数值即可。 然而，在层叠比较复杂的 HTML 元素上使用 <code>z-index</code> 时，结果可能让人觉得困惑，甚至不可思议。 这是由复杂的元素排布规则导致的。 更多细节请参见 <span style="line-height: inherit;"> </span><a class="external" href="http://www.w3.org/TR/CSS21/zindex.html" style="line-height: inherit;">CSS-2.1 Appendix E</a> 。</p> + +<p>本文将通过一些简单的例子来解释这些规则。</p> + +<ol> + <li><a href="/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index" title="zh-CN/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : 默认的摆放规则，即不含有 z-index 属性时</li> + <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_and_float" title="zh-CN/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : 浮动元素的处理方式</li> + <li><a href="/zh-CN/CSS/Understanding_z-index/Adding_z-index" title="zh-CN/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : 使用 z-index 来改变堆放顺序</li> + <li><a href="/zh-CN/CSS/Understanding_z-index/The_stacking_context" title="zh-CN/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : 内容堆放注意事项</li> + <li><a href="/zh-TW/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1" title="zh-CN/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 在两层元素的第二层上使用 z-index</li> + <li><a href="/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2" title="zh-CN/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 在两层元素的所有层上使用 z-index</li> + <li><a href="/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3" title="zh-CN/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 在三层元素的第二层上使用 z-index</li> +</ol> + +<div class="originaldocinfo"> +<p> </p> + +<h2 id="Original_Document_Information" name="Original_Document_Information">原始文档信息</h2> + +<p> </p> + +<ul> + <li>作者: Paolo Lombardi</li> + <li>This article is the English translation of an article I wrote in Italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <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/zh-cn/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html new file mode 100644 index 0000000000..9312c1759d --- /dev/null +++ b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html @@ -0,0 +1,158 @@ +--- +title: 层叠与浮动 +slug: Web/Guide/CSS/Understanding_z_index/Stacking_and_float +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +--- +<p>« <a href="/zh-CN/CSS" title="CSS">CSS</a> « <a href="/zh-CN/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">理解 CSS 中的 z-index</span></a></p> + +<h3 id="层叠与浮动">层叠与浮动</h3> + +<p>对于浮动的块元素来说，层叠顺序变得有些不同。浮动块元素被放置于非定位块元素与定位块元素之间：</p> + +<ol> + <li>根元素的背景与边框</li> + <li>位于普通流中的后代块元素按照它们在 HTML 中出现的顺序层叠</li> + <li>浮动块元素</li> + <li>后代中的定位元素按照它们在 HTML 中出现的顺序层叠</li> +</ol> + +<p>实际上，在接下来的例子中你会看到，非定位块元素(DIV #4)的背景与边框丝毫不会受到浮动块元素的影响，但内容却恰恰相反。出现这种情况是由于 CSS 的标准浮动行为引起的。</p> + +<p>这种行为可以通过前一章列表的改进版本来解释：</p> + +<ol> + <li>根元素的背景与边框</li> + <li>位于普通流中的后代块元素按照它们在 HTML 中出现的顺序层叠</li> + <li>浮动块元素</li> + <li>常规流中的后代行内元素</li> + <li>后代中的定位元素按照它们在 HTML 中出现的顺序层叠</li> +</ol> + +<div class="note"><strong>注意：</strong> 在下面的例子中，除了非定位的那个块元素外，所有的块元素都是半透明的，以便来显示层叠顺序。如果减少非定位元素(DIV #4)的透明度，会发生很诡异的事情：该元素的背景和边框会出现在浮动块元素上方，但是仍然处于定位元素的下方。我不能确定这是规范的 bug 或是怪异的解析。(设置透明度会隐式的创建一个层叠上下文。)</div> + +<p>{{ EmbedLiveSample('该示例的源码', '563', '255', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_and_float') }}</p> + +<h3 id="该示例的源码"><strong>该示例的源码</strong></h3> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <title>Stacking and float</title> + <style type="text/css"> + + div { + font: 12px Arial; + } + + span.bold { font-weight: bold; } + + #absdiv1 { + position: absolute; + width: 150px; + height: 200px; + top: 10px; + right: 140px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; + } + + #normdiv { + /* opacity: 0.7; */ + height: 100px; + border: 1px dashed #999966; + background-color: #ffffcc; + margin: 0px 10px 0px 10px; + text-align: left; + } + + #flodiv1 { + margin: 0px 10px 0px 20px; + float: left; + width: 150px; + height: 200px; + border: 1px dashed #009900; + background-color: #ccffcc; + text-align: center; + } + + #flodiv2 { + margin: 0px 20px 0px 10px; + float: right; + width: 150px; + height: 200px; + border: 1px dashed #009900; + background-color: #ccffcc; + text-align: center; + } + + #absdiv2 { + position: absolute; + width: 150px; + height: 100px; + top: 130px; + left: 100px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; + } + +</style> +</head> + +<body> + <br /><br /> + + <div id="absdiv1"> + <br /><span class="bold">DIV #1</span> + <br />position: absolute; + </div> + + <div id="flodiv1"> + <br /><span class="bold">DIV #2</span> + <br />float: left; + </div> + + <div id="flodiv2"> + <br /><span class="bold">DIV #3</span> + <br />float: right; + </div> + + <br /> + + <div id="normdiv"> + <br /><span class="bold">DIV #4</span> + <br />no positioning + </div> + + <div id="absdiv2"> + <br /><span class="bold">DIV #5</span> + <br />position: absolute; + </div> +</body> +</html> +</pre> + +<h3 id="相关链接">相关链接</h3> + +<ul> + <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_without_z-index" title="zh-CN/CSS/Understanding_z-index/Stacking_without_z-index">未使用 z-index 的层叠</a>：默认层叠规则</li> + <li><a href="/zh-CN/CSS/Understanding_z-index/Adding_z-index" title="zh-CN/CSS/Understanding_z-index/Adding_z-index">使用 z-index 的层叠</a>： 使用 z-index 来改变默认层叠顺序</li> + <li><a href="/zh-CN/CSS/Understanding_z-index/The_stacking_context" title="zh-CN/CSS/Understanding_z-index/The_stacking_context">层叠上下文</a>：关于层叠上下文的注意事项</li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1" title="zh-CN/CSS/Understanding_z-index/Stacking_context_example_1">层叠上下文示例 1</a>：两层嵌套标签的 HTML 中，z-index 作用在内层标签上</li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2" title="zh-CN/CSS/Understanding_z-index/Stacking_context_example_2">层叠上下文示例 2</a>：两层嵌套标签的 HTML 中，z-index 作用在内外层标签上</li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3" title="zh-CN/CSS/Understanding_z-index/Stacking_context_example_3">层叠上下文示例 3</a>：三层嵌套标签的 HTML 中，z-index 作用在中间层标签上</li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">原始文档信息</h3> + +<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> + +<p> </p> diff --git a/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html new file mode 100644 index 0000000000..59f298d269 --- /dev/null +++ b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html @@ -0,0 +1,133 @@ +--- +title: Stacking context example 1 +slug: Web/Guide/CSS/Understanding_z_index/Stacking_context_example_1 +tags: + - 理解_CSS_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +--- +<p>« <a href="/en/CSS" title="CSS">CSS</a> « <a href="/en/CSS/Understanding_z-index" title="Understanding CSS z-index">Understanding CSS z-index</a></p> + +<h3 id="Stacking_context_层叠上下文_例子_1">Stacking context 层叠上下文 例子 1</h3> + +<p>先看一个基础的例子。在根元素的层叠上下文中，有两个都是相对定位且没有设置 <code>z-index</code> 属性的 DIV（DIV #1 和 DIV #3）。在 DIV #1 中有一个绝对定位的 DIV #2，而在 DIV #3 中有一个绝对定位的 DIV #4，DIV #2 和 DIV #4 也都没有设置 <code>z-index</code> 属性。</p> + +<p>现在唯一的层叠上下文就是根元素的上下文。因为没有 <code>z-index</code> 值，所有的元素按照出现（在 HTML 中）的顺序层叠。</p> + +<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/914/=Understanding_zindex_05a.png"></p> + +<p>如果给 DIV #2 设置一个正的 <code>z-index</code> 值 (不能是 <code>0</code> 或 <code>auto</code>) ，那么 DIV #2 会渲染在其他所有 DIV 之上。</p> + +<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/915/=Understanding_zindex_05b.png"></p> + +<p>然后如果给 DIV #4 也设置一个正的 <code>z-index</code> 值，且这个值比给的 DIV #2 设置的值要大，则 DIV #4 会渲染在其他所有 DIV（包括 DIV #2）之上。</p> + +<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/916/=Understanding_zindex_05c.png"></p> + +<p>在这个列子中，DIV #2 和 DIV #4 不是兄弟关系（因为它们的父元素不同）。即便如此，我们也可以通过 <code>z-index</code> 来控制 DIV #4 和 DIV #2 的层叠关系。这是因为，DIV #1 和 DIV #3 没有设置 <code>z-index</code> 的值，所以它们不会创建层叠上下文。这就意味着 DIV #1 和 DIV #3 的所有内容（包括 DIV #2 和 DIV #4）都属于同一个层叠上下文（即根元素的层叠上下文）。</p> + +<p>就层叠上下文而言，DIV #1 和 DIV #3 隶属于根元素，因此层次结构如下所示：</p> + +<ul> + <li>根层叠上下文（root stacking context） + <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 不是透明的。记住所有设置了 opacity 小于 1 的定位元素都会隐式地生成一个层叠上下文（和给元素增加一个 z-index 值的效果相同）。上述的例子是为了说明，当父元素没有生成一个层叠上下文环境的时候，各元素是怎么层叠的。</div> + +<h2 id="Example"><strong>Example</strong></h2> + +<h3 id="HTML"><strong>HTML</strong></h3> + +<pre class="brush: html"><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">.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">Result</h3> + +<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }}</p> + +<h3 id="See_also">See also</h3> + +<ul> + <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li> + <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li> + <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_89E" style="display: none;"> </span></li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + +<ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: July 9th, 2005</li> +</ul> +</div> diff --git a/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html new file mode 100644 index 0000000000..3c21bef062 --- /dev/null +++ b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html @@ -0,0 +1,142 @@ +--- +title: Stacking context example 2 +slug: Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2 +tags: + - CSS + - 理解css的index属性 + - 高级 +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +--- +<p>« <a href="/en/CSS" title="CSS">CSS</a> «<a href="/en/CSS/Understanding_z-index" title="Understanding CSS z-index"> 理解CSS z-index</a></p> + +<h3 id="层叠上下文示例_2">层叠上下文示例 2</h3> + +<p>这是一个非常简单的例子, 但它是理解层叠上下文这个概念的关键。还是和之前的例子中一样的四个DIV，不过现在z-index属性被分配在两个水平的层次结构中。</p> + +<p>{{ EmbedLiveSample('Example_source_code', '352', '270', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2') }}</p> + +<p>可以看到现在DIV #2 (z-index: 2)在DIV #3 (z-index: 1)的上面，因为他们都属于同一个层叠上下文（根元素创建的层叠上下文），所以z-index的值决定了元素如何叠放。</p> + +<p>奇怪的是DIV #2 (z-index: 2)在DIV #4 (z-index: 10)的上面，尽管DIV #2的z-index值小于DIV #4。原因在于它们不属于同一个层叠上下文。DIV #4处于DIV #3所创建的层叠上下文中，而整个DIV #3（包含其后代元素）是在DIV #2下面的。</p> + +<p>为了更好的理解这种情况, 这里列出了层叠上下文的层次结构:</p> + +<ul> + <li>根上下文（root stacking context） + <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>Note:</strong> 值得记住的是，通常HTML的层次结构和层叠上下文的层次结构是不同的。在层叠上下文的层次结构中，没有创建层叠上下文的元素同其父级处于一个层叠上下文。</div> + +<h3 id="示例源码"><strong>示例源码</strong></h3> + +<pre class="brush: html"><!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> + +<h3 id="相关文章">相关文章</h3> + +<ul> + <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li> + <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li> + <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">原文信息</h3> + +<ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: July 9th, 2005</li> +</ul> +</div> + +<p> </p> diff --git a/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html new file mode 100644 index 0000000000..f7d2972c7c --- /dev/null +++ b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html @@ -0,0 +1,190 @@ +--- +title: Stacking context example 3 +slug: Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3 +tags: + - CSS + - 层叠上下文 + - 理解css的z-index属性 +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +--- +<p>« <a href="/en/CSS" title="CSS">CSS</a> « <a href="/en/CSS/Understanding_z-index" title="Understanding CSS z-index">Understanding CSS z-index</a></p> + +<h3 id="层叠上下文示例_3">层叠上下文示例 3</h3> + +<p>最后一个例子展示了，在多层级的HTML结构中混合了多个定位元素且使用类选择器设置z-index属性时出现的问题。</p> + +<p>我们来看一个用多个定位的div实现的三级菜单的例子，二级菜单和三级菜单在鼠标悬停或点击其父元素时才出现，通常这样的菜单在客户端和服务端都是由脚本生成的，所以样式规则不是通过ID选择器设置而是通过类选择器设置。</p> + +<p>如果这个三级菜单有部分区域重叠，管理层叠顺序就会成为一个问题。</p> + +<p>{{ EmbedLiveSample('Example_source_code', '320', '330', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3') }}</p> + + + +<p>一级菜单仅仅是相对定位，所以没有创建层叠上下文。</p> + +<p>二级菜单相对其父元素（一级菜单）绝对定位，要使二级菜单在所有一级菜单的上方，则需要使用z-index。此时每个二级菜单都创建了一个层叠上下文，而三级菜单也处于其父元素（二级菜单）创建的上下文中。</p> + +<p>这样一来，在HTML结构中处于三级菜单后面的二级菜单，则会显示在三级菜单的上方，因为所有的二级菜单都使用了同样的z-index值，所以处于同一个层叠上下文中。</p> + +<p>为了能更好地理解这种情况，这里列出了层叠上下文的层次结构:</p> + +<ul> + <li>root stacking context + <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>可以通过移除不同级别的菜单之间的重叠，或者使用ID选择器指定独立的（不同的）z-index值，或者减少HTML的层级来解决这个问题。</p> + +<div class="note"><strong>Note:</strong> 在源码中你会看到三级菜单和二级菜单是由一个绝对定位元素包含很多div来实现的，这种方式在需要同时定位一组元素时很有用。</div> + +<h3 id="示例源码"><strong>示例源码</strong></h3> + +<pre class="brush: html"><!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> + +<h3 id="相关文章">相关文章</h3> + +<ul> + <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li> + <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li> + <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">原文信息</h3> + +<ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: July 9th, 2005</li> +</ul> +</div> + +<p><strong>Note</strong>: the reason the sample image looks wrong - with the second level 2 overlapping the level 3 menus - is because level 2 has opacity, which creates a new stacking context. Basically, this whole sample page is incorrect and misleading.</p> diff --git a/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html new file mode 100644 index 0000000000..a5aaebdc95 --- /dev/null +++ b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html @@ -0,0 +1,161 @@ +--- +title: Stacking without z-index +slug: Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +--- +<p style="height: 15px;">« <a href="/zh-CN/CSS" title="CSS">CSS</a> « <a href="/zh-CN/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">理解 CSS z-index</span></a></p> + +<h3 id="不含z-index的堆叠">不含z-index的堆叠</h3> + +<p>当没有元素包含z-index属性时，元素按照如下顺序堆叠（从底到顶顺序）：</p> + +<ol> + <li>根元素的背景和边界</li> + <li>普通流(无定位)里的块元素(没有position或者position:static;)按HTML中的出现顺序堆叠</li> + <li>定位元素按HTML中的出现顺序堆叠</li> +</ol> + +<p>在接下来的例子中，相对和绝对定位的块元素的大小和位置刚好说明上述堆叠规则。</p> + +<div class="note"> +<p><strong>Notes:</strong></p> + +<ul> + <li>在一组由不含有任何z-index属性的同类元素，如例子中的定位块元素（DIV #1 至 #4），这些元素按照它们在HTML结构中出现的顺序堆叠，而不管它们的定位属性如何。</li> + <li> + <p>普通流中不含有定位属性的标准块元素（DIV #5）始终先于定位元素渲染并出现在定位元素的下层，即便它们在HTML结构中出现的位置晚于定位元素也是如此。</p> + </li> +</ul> +</div> + +<p><img alt="understanding_zindex_01.png" class="default internal" src="/@api/deki/files/910/=understanding_zindex_01.png"></p> + +<p> </p> + +<h3 id="Example" name="Example">示例</h3> + +<pre class="brush: html"><!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; } + +#normdiv { + height: 70px; + border: 1px dashed #999966; + background-color: #ffffcc; + margin: 0px 50px 0px 50px; + text-align: center; +} + +#reldiv1 { + opacity: 0.7; + height: 100px; + position: relative; + top: 30px; + border: 1px dashed #669966; + background-color: #ccffcc; + margin: 0px 50px 0px 50px; + text-align: center; +} + +#reldiv2 { + opacity: 0.7; + height: 100px; + position: relative; + top: 15px; + left: 20px; + border: 1px dashed #669966; + background-color: #ccffcc; + margin: 0px 50px 0px 50px; + text-align: center; +} + +#absdiv1 { + opacity: 0.7; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + left: 10px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +#absdiv2 { + opacity: 0.7; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + right: 10px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +</style></head> + +<body> + +<br /><br /> + +<div id="absdiv1"> + <br /><span class="bold">DIV #1</span> + <br />position: absolute; +</div> + +<div id="reldiv1"> + <br /><span class="bold">DIV #2</span> + <br />position: relative; +</div> + +<div id="reldiv2"> + <br /><span class="bold">DIV #3</span> + <br />position: relative; +</div> + +<div id="absdiv2"> + <br /><span class="bold">DIV #4</span> + <br />position: absolute; +</div> + +<div id="normdiv"> + <br /><span class="bold">DIV #5</span> + <br />no positioning +</div> + +</body></html> + +</pre> + +<h3 id="See_also">See also</h3> + +<ul> + <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">堆叠与浮动</a> : 浮动元素的处理方式</li> + <li><a href="/zh-CN/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">增加 z-index</a> : 使用z-index来改变堆放顺序</li> + <li><a href="/zh-CN/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">堆叠上下文</a> : 堆叠上下文的注意事项</li> + <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">堆叠上下文示例 1</a> : 在两层元素的第二层上使用 z-index</li> + <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">堆叠上下文示例 2</a> : 在两层元素的所有层上使用 z-index</li> + <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">堆叠上下文示例 3</a> : 在三层元素的第二层上使用 z-index<span id="cke_bm_94E" style="display: none;"> </span></li> +</ul> + +<p> </p> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + +<ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: July 9th, 2005</li> +</ul> +</div> + +<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Empilement_sans_z-index" } ) }}</p> diff --git a/files/zh-cn/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/zh-cn/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html new file mode 100644 index 0000000000..6d96e3e198 --- /dev/null +++ b/files/zh-cn/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -0,0 +1,240 @@ +--- +title: 层叠上下文 +slug: Web/Guide/CSS/Understanding_z_index/The_stacking_context +tags: + - Advanced + - CSS + - CSS层叠上下文 + - z-index + - 教程 +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +--- +<div>{{cssref}}</div> + +<p>我们假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，<strong>层叠上下文</strong>就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。</p> + +<h2 id="层叠上下文">层叠上下文</h2> + +<p>在本篇之前的部分——<a href="/en-US/docs/CSS/Understanding_z-index/Adding_z-index" style="line-height: 1.5;" title="Adding z-index">运用 z-index</a><span style="line-height: 1.5;">，（我们认识到）某些元素</span><span style="line-height: 1.5;">的渲染顺序是由其 <code>z-index</code> 的值影响的。</span>这是因为这些元素具有能够使他们形成一个<em>层叠上下文</em>的特殊属性<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>（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；</li> + <li>flex ({{cssxref("flexbox")}}) 容器的子元素，且 {{cssxref("z-index")}} 值不为 <code>auto</code>；</li> + <li>grid ({{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" title="http://www.w3.org/TR/css3-color/#transparency">the specification for opacity</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")}} 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素（参考<a href="http://dev.opera.com/articles/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>Note:</strong> 层叠上下文的层级是 HTML 元素层级的一个子级，因为只有某些元素才会创建层叠上下文。可以这样说，没有创建自己的层叠上下文的元素会被父层叠上下文<em>同化</em>。</div> + +<h2 id="示例">示例</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>Root + <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 元素就被作为一个整体传递与兄弟元素的 DIV 在 root（根）元素进行层叠。</p> + +<div class="note"> +<p><strong>注意：</strong></p> + +<ul> + <li>DIV #4 被渲染在 DIV #1 之下，因为 DIV #1 的 z-index (5) 在 root 元素的层叠上下文中生效，而 DIV #4 的 z-index (6) 在 DIV #3 的层叠上下文中生效。因此，DIV #4 在 DIV #1 之下，因为 DIV #4 归属于 z-index 值较低的 DIV #3 元素。</li> + <li>由此可得 DIV #2 (z-index 2) 被渲染在 DIV #5 (z-index 1) 之下，因为 DIV #5 归属于 z-index 较高的 DIV #3 元素。</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>Root + <ul> + <li>DIV #2 - z-index 为 2</li> + <li>DIV #3 - z-index 为 4 + <ul> + <li>DIV #5 - z-index 为 1，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.1</li> + <li>DIV #6 - z-index 为 3，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.3</li> + <li>DIV #4 - z-index 为 6，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.6</li> + </ul> + </li> + <li>DIV #1 - z-index 为 5</li> + </ul> + </li> + </ul> + </li> +</ul> +</div> + +<h2 id="示例源码">示例源码</h2> + +<h3 id="HTML">HTML</h3> + +<pre><code><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></code></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">* { + 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">Result</h3> + +<p>{{EmbedLiveSample('示例源码', '100%', '396') }}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stacking without the z-index property</a>: The stacking rules that apply when <code>z-index</code> is not used.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">Stacking with floated blocks</a>: How floating elements are handled with stacking.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Using z-index</a>: How to use <code>z-index</code> to change default stacking.</li> + <li><a href="/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_1" title="CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li> + <li><a href="/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_2" title="CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> + <li><a href="/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_3" title="CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</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>上次更新时间: July 9th, 2005</li> +</ul> +</div> |