From 310fd066e91f454b990372ffa30e803cc8120975 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:56:40 +0100 Subject: unslug zh-cn: move --- .../adding_z-index/index.html | 158 ++++++++++++++ .../understanding_z_index/index.html | 47 ++++ .../stacking_and_float/index.html | 158 ++++++++++++++ .../stacking_context_example_1/index.html | 133 ++++++++++++ .../stacking_context_example_2/index.html | 142 ++++++++++++ .../stacking_context_example_3/index.html | 190 ++++++++++++++++ .../stacking_without_z-index/index.html | 161 ++++++++++++++ .../the_stacking_context/index.html | 240 +++++++++++++++++++++ 8 files changed, 1229 insertions(+) create mode 100644 files/zh-cn/web/css/css_positioning/understanding_z_index/adding_z-index/index.html create mode 100644 files/zh-cn/web/css/css_positioning/understanding_z_index/index.html create mode 100644 files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html create mode 100644 files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html create mode 100644 files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html create mode 100644 files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html create mode 100644 files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html create mode 100644 files/zh-cn/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html (limited to 'files/zh-cn/web/css/css_positioning') 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 +--- +

« CSS «理解z-index

+

使用 {{ cssxref("z-index") }}

+

在第一个例子 Stacking without z-index中， 我们描述了默认的摆放顺序。 当你需要指定不同的排列顺序时， 只要给元素指定一个z-index的数值就可以了。 

+

 

+

该属性必须是整数(正负均可)， 它体现了元素在z轴的位置。 如果你对z轴体系不了解， 你也可以把它理解成“层叠”， 每个层都有一个顺序数， 顺序数大的层在上面， 小的在下面。 

+

注意！z-index只对指定了 positioned属性的元素有效。

+ +
+

注释:

+ +
+

在下一个例子中， 所有的层都是用z-index进行排序的。 元素div#5 的z-index无效， 因为他没有被指定position属性。 

+

Example of stacking rules modified using z-index

+

Example source code

+
<!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>
+
+

See also

+ +
+

Original Document Information

+ +
+

{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Ajout_de_z-index" } ) }}

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 +--- +

{{cssref}}

+ +

通常情况下，HTML页面可以被认为是二维的，因为文本，图像和其他元素被排列在页面上而不重叠。在这种情况下，只有一个渲染进程，所有元素都知道其他元素所占用的空间。 {{cssxref("z-index")}}属性可让你在渲染内容时调整对象分层的顺序。

+ +
+

在 CSS 2.1 中, 所有的盒模型元素都处于三维坐标系中。 除了我们常用的横坐标和纵坐标， 盒模型元素还可以沿着“z 轴”层叠摆放， 当他们相互覆盖时， z 轴顺序就变得十分重要。

+
+ +

(参见 CSS 2.1 Section 9.9.1 - Layered presentation)

+ +

这意味着其实 CSS 允许你在现有的渲染引擎上层叠的摆放盒模型元素。 所有的层都可以用一个整数( z 轴顺序)来表明当前层在 z 轴的位置。 数字越大， 元素越接近观察者。Z 轴顺序用 CSS 的 {{ cssxref("z-index") }} 属性来指定。

+ +

使用 z-index 很简单： 给它指定一个整数值即可。 然而，在层叠比较复杂的 HTML 元素上使用 z-index 时，结果可能让人觉得困惑，甚至不可思议。 这是由复杂的元素排布规则导致的。  更多细节请参见  CSS-2.1 Appendix E 。

+ +

本文将通过一些简单的例子来解释这些规则。

+ +
    +
  1. Stacking without z-index : 默认的摆放规则，即不含有 z-index 属性时
    2. +
  2. Stacking and float : 浮动元素的处理方式
    3. +
  3. Adding z-index : 使用 z-index 来改变堆放顺序
    4. +
  4. The stacking context : 内容堆放注意事项
    5. +
  5. Stacking context example 1 : 在两层元素的第二层上使用 z-index
    6. +
  6. Stacking context example 2 : 在两层元素的所有层上使用 z-index
    7. +
  7. Stacking context example 3 : 在三层元素的第二层上使用 z-index
    8. +
+ +
+

 

+ +

原始文档信息

+ +

 

+ + +
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 +--- +

« CSS « 理解 CSS 中的 z-index

+ +

层叠与浮动

+ +

对于浮动的块元素来说，层叠顺序变得有些不同。浮动块元素被放置于非定位块元素与定位块元素之间：

+ +
    +
  1. 根元素的背景与边框
    2. +
  2. 位于普通流中的后代块元素按照它们在 HTML 中出现的顺序层叠
    3. +
  3. 浮动块元素
    4. +
  4. 后代中的定位元素按照它们在 HTML 中出现的顺序层叠
    5. +
+ +

实际上，在接下来的例子中你会看到，非定位块元素(DIV #4)的背景与边框丝毫不会受到浮动块元素的影响，但内容却恰恰相反。出现这种情况是由于 CSS 的标准浮动行为引起的。

+ +

这种行为可以通过前一章列表的改进版本来解释：

+ +
    +
  1. 根元素的背景与边框
    2. +
  2. 位于普通流中的后代块元素按照它们在 HTML 中出现的顺序层叠
    3. +
  3. 浮动块元素
    4. +
  4. 常规流中的后代行内元素
    5. +
  5. 后代中的定位元素按照它们在 HTML 中出现的顺序层叠
    6. +
+ +
注意： 在下面的例子中，除了非定位的那个块元素外，所有的块元素都是半透明的，以便来显示层叠顺序。如果减少非定位元素(DIV #4)的透明度，会发生很诡异的事情：该元素的背景和边框会出现在浮动块元素上方，但是仍然处于定位元素的下方。我不能确定这是规范的 bug 或是怪异的解析。(设置透明度会隐式的创建一个层叠上下文。)
+ +

{{ EmbedLiveSample('该示例的源码', '563', '255', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_and_float') }}

+ +

该示例的源码

+ +
<!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>
+
+ +

相关链接

+ + + +
+

原始文档信息

+ + +
+ +

 

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 +--- +

« CSS « Understanding CSS z-index

+ +

Stacking context 层叠上下文 例子 1

+ +

先看一个基础的例子。在根元素的层叠上下文中，有两个都是相对定位且没有设置 z-index 属性的 DIV（DIV #1 和 DIV #3）。在 DIV #1 中有一个绝对定位的 DIV #2，而在 DIV #3 中有一个绝对定位的 DIV #4，DIV #2 和 DIV #4 也都没有设置 z-index 属性。

+ +

现在唯一的层叠上下文就是根元素的上下文。因为没有 z-index 值，所有的元素按照出现（在 HTML 中）的顺序层叠。

+ +

Stacking context example 1

+ +

如果给 DIV #2 设置一个正的 z-index  值 (不能是 0 或 auto) ，那么 DIV #2 会渲染在其他所有 DIV 之上。

+ +

Stacking context example 1

+ +

然后如果给 DIV #4 也设置一个正的 z-index  值，且这个值比给的 DIV #2 设置的值要大，则 DIV #4  会渲染在其他所有 DIV（包括 DIV #2）之上。

+ +

Stacking context example 1

+ +

在这个列子中，DIV #2 和 DIV #4 不是兄弟关系（因为它们的父元素不同）。即便如此，我们也可以通过 z-index 来控制 DIV #4 和 DIV #2 的层叠关系。这是因为，DIV #1 和 DIV #3 没有设置 z-index 的值，所以它们不会创建层叠上下文。这就意味着 DIV #1 和 DIV #3 的所有内容（包括 DIV #2 和 DIV #4）都属于同一个层叠上下文（即根元素的层叠上下文）。

+ +

就层叠上下文而言，DIV #1 和 DIV #3 隶属于根元素，因此层次结构如下所示：

+ + + +
注意： DIV #1 和 DIV #3 不是透明的。记住所有设置了 opacity 小于 1 的定位元素都会隐式地生成一个层叠上下文（和给元素增加一个 z-index 值的效果相同）。上述的例子是为了说明，当父元素没有生成一个层叠上下文环境的时候，各元素是怎么层叠的。
+ +

Example

+ +

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>
+
+ +

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;
+}
+ +

Result

+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }}

+ +

See also

+ + + +
+

Original Document Information

+ + +
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 +--- +

« CSS « 理解CSS z-index

+ +

层叠上下文示例 2

+ +

这是一个非常简单的例子, 但它是理解层叠上下文这个概念的关键。还是和之前的例子中一样的四个DIV，不过现在z-index属性被分配在两个水平的层次结构中。

+ +

{{ EmbedLiveSample('Example_source_code', '352', '270', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2') }}

+ +

可以看到现在DIV #2 (z-index: 2)在DIV #3 (z-index: 1)的上面，因为他们都属于同一个层叠上下文（根元素创建的层叠上下文），所以z-index的值决定了元素如何叠放。

+ +

奇怪的是DIV #2 (z-index: 2)在DIV #4 (z-index: 10)的上面，尽管DIV #2的z-index值小于DIV #4。原因在于它们不属于同一个层叠上下文。DIV #4处于DIV #3所创建的层叠上下文中，而整个DIV #3（包含其后代元素）是在DIV #2下面的。

+ +

为了更好的理解这种情况, 这里列出了层叠上下文的层次结构:

+ + + +
Note: 值得记住的是，通常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>
+
+ +

相关文章

+ + + +
+

原文信息

+ + +
+ +

 

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 +--- +

« CSS « Understanding CSS z-index

+ +

层叠上下文示例 3

+ +

最后一个例子展示了，在多层级的HTML结构中混合了多个定位元素且使用类选择器设置z-index属性时出现的问题。

+ +

我们来看一个用多个定位的div实现的三级菜单的例子，二级菜单和三级菜单在鼠标悬停或点击其父元素时才出现，通常这样的菜单在客户端和服务端都是由脚本生成的，所以样式规则不是通过ID选择器设置而是通过类选择器设置。

+ +

如果这个三级菜单有部分区域重叠，管理层叠顺序就会成为一个问题。

+ +

{{ EmbedLiveSample('Example_source_code', '320', '330', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3') }}

+ + + +

一级菜单仅仅是相对定位，所以没有创建层叠上下文。

+ +

二级菜单相对其父元素（一级菜单）绝对定位，要使二级菜单在所有一级菜单的上方，则需要使用z-index。此时每个二级菜单都创建了一个层叠上下文，而三级菜单也处于其父元素（二级菜单）创建的上下文中。

+ +

这样一来，在HTML结构中处于三级菜单后面的二级菜单，则会显示在三级菜单的上方，因为所有的二级菜单都使用了同样的z-index值，所以处于同一个层叠上下文中。

+ +

为了能更好地理解这种情况，这里列出了层叠上下文的层次结构:

+ + + +

可以通过移除不同级别的菜单之间的重叠，或者使用ID选择器指定独立的（不同的）z-index值，或者减少HTML的层级来解决这个问题。

+ +
Note: 在源码中你会看到三级菜单和二级菜单是由一个绝对定位元素包含很多div来实现的，这种方式在需要同时定位一组元素时很有用。
+ +

示例源码

+ +
<!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>
+
+ +

相关文章

+ + + +
+

原文信息

+ + +
+ +

Note: 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.

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 +--- +

« CSS « 理解 CSS z-index

+ +

不含z-index的堆叠

+ +

当没有元素包含z-index属性时，元素按照如下顺序堆叠（从底到顶顺序）：

+ +
    +
  1. 根元素的背景和边界
    2. +
  2. 普通流(无定位)里的块元素(没有position或者position:static;)按HTML中的出现顺序堆叠
    3. +
  3. 定位元素按HTML中的出现顺序堆叠
    4. +
+ +

在接下来的例子中，相对和绝对定位的块元素的大小和位置刚好说明上述堆叠规则。

+ +
+

Notes:

+ + +
+ +

understanding_zindex_01.png

+ +

 

+ +

示例

+ +
<!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>
+
+
+ +

See also

+ + + +

 

+ +
+

Original Document Information

+ + +
+ +

{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Empilement_sans_z-index" } ) }}

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 +--- +
{{cssref}}
+ +

我们假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。

+ +

层叠上下文

+ +

在本篇之前的部分——运用 z-index，（我们认识到）某些元素的渲染顺序是由其 z-index 的值影响的。这是因为这些元素具有能够使他们形成一个层叠上下文的特殊属性。

+ +

文档中的层叠上下文由满足以下任意一个条件的元素形成：

+ + + +

在层叠上下文中，子元素同样也按照上面解释的规则进行层叠。 重要的是，其子级层叠上下文的 z-index 值只在父级中才有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。

+ +

总结:

+ + + +
Note: 层叠上下文的层级是 HTML 元素层级的一个子级，因为只有某些元素才会创建层叠上下文。可以这样说，没有创建自己的层叠上下文的元素会被父层叠上下文同化。
+ +

示例

+ +

Example of stacking rules modified using z-index

+ +

在这个例子中，每个被定位的元素都创建了独自的层叠上下文，因为他们被指定了定位属性和 z-index 值。我们把层叠上下文的层级列在下面：

+ + + +

请一定要注意 DIV #4，DIV #5 和 DIV #6 是 DIV #3 的子元素，所以它们的层叠完全在 DIV #3 中被处理。一旦 DIV #3 中的层叠和渲染处理完成，DIV #3 元素就被作为一个整体传递与兄弟元素的 DIV 在 root（根）元素进行层叠。

+ +
+

注意：

+ + +
+ +

示例源码

+ +

HTML

+ +
<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>
+ +

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;
+}
+ +

Result

+ +

{{EmbedLiveSample('示例源码', '100%', '396') }}

+ +

参考

+ + + +
+

原始文档信息

+ + +
-- cgit v1.2.3-54-g00ecf