From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/z-index/index.html | 139 +++++++++++++++++++++++++++++++++ 1 file changed, 139 insertions(+) create mode 100644 files/zh-cn/web/css/z-index/index.html (limited to 'files/zh-cn/web/css/z-index') diff --git a/files/zh-cn/web/css/z-index/index.html b/files/zh-cn/web/css/z-index/index.html new file mode 100644 index 0000000000..54ec0c54f3 --- /dev/null +++ b/files/zh-cn/web/css/z-index/index.html @@ -0,0 +1,139 @@ +--- +title: z-index +slug: Web/CSS/z-index +tags: + - CSS + - CSS定位 + - CSS属性 +translation_of: Web/CSS/z-index +--- +
{{CSSRef}}
+ +

z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。 当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。

+ +

{{EmbedInteractiveExample("pages/css/z-index.html")}}

+ + + +

对于一个已经定位的盒子（即其 position 属性值不是 static，这里要注意的是 CSS 把元素看作盒子），z-index 属性指定：

+ +
    +
  1. 盒子在当前堆叠上下文中的堆叠层级。
    2. +
  2. 盒子是否创建一个本地堆叠上下文。
    3. +
+ +

语法

+ +
/* 字符值 */
+z-index: auto;
+
+/* 整数值 */
+z-index: 0;
+z-index: 3;
+z-index: 289;
+z-index: -1;/* 使用负值降低优先级 */
+
+/* 全局值 */
+z-index: inherit;
+z-index: initial;
+z-index: unset;
+ +

z-index 属性可以被设定为关键词 auto 或 <integer>。

+ +

取值

+ +
+
auto
+
盒子不会创建一个新的本地堆叠上下文。在当前堆叠上下文中生成的盒子的堆叠层级和父级盒子相同。
+
<integer>
+
{{cssxref("<integer>")}}（整型数字）是生成的盒子在当前堆叠上下文中的堆叠层级。此盒子也会创建一个堆叠层级为 0 的本地堆叠上下文。这意味着后代（元素）的 z-indexes 不与此元素的外部元素的 z-indexes 进行对比。
+
+ +

格式化语法

+ +
{{csssyntax("z-index")}}
+
+ +

示例

+ +

HTML

+ +
<div class="wrapper">
+  <div class="dashed-box">Dashed box</div>
+  <div class="gold-box">Gold box</div>
+  <div class="green-box">Green box</div>
+</div>
+ +

CSS

+ +
.wrapper {
+  position: relative;
+}
+
+.dashed-box {
+  position: relative;
+  z-index: 1;
+  border: dashed;
+  height: 8em;
+  margin-bottom: 1em;
+  margin-top: 2em;
+}
+.gold-box {
+  position: absolute;
+  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
+  background: gold;
+  width: 80%;
+  left: 60px;
+  top: 3em;
+}
+.green-box {
+  position: absolute;
+  z-index: 2; /* put .green-box above .dashed-box */
+  background: lightgreen;
+  width: 20%;
+  left: 65%;
+  top: -25px;
+  height: 7em;
+  opacity: 0.9;
+}
+ +

结果

+ +

{{ EmbedLiveSample('示例', '550', '200', '') }}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Transitions', '#animatable-css', 'animation behavior for z-index')}}{{Spec2('CSS3 Transitions')}}Defines z-index as animatable.
{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}{{Spec2('CSS2.1')}}原始定义
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.z-index")}}

+ +

参阅

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