Z Index（ z-index ）是一个CSS属性，用于定义重叠HTML元素的顺序。具有较高索引的元素将放置在具有较低索引的元素之上。

注意：Z索引仅适用于定位元素（ position:absolute ， position:relative或position:fixed ）。

可能的值

/* Default value if not specified */
 z-index: auto;

 /* Integer values */
 z-index: 1;
 z-index: 100;
 z-index: 9999;
 z-index: -1;

 /* Global values */
 z-index: inherit;
 z-index: initial;
 z-index: unset;

示例用法

在此示例中，您可以使用z-index看到以不同顺序在彼此之上显示的三个框。

HTML

<div class="container">
  <div class="box" id="blue"></div>
  <div class="box" id="red"></div>
  <div class="box" id="green"></div>
 </div>

CSS

#blue {
  background-color: blue;
 }

 #red {
  background-color: red;
 }

 #green {
  background-color: green;
 }

由于未定义z-index ，因此默认值为auto 。这是一个结果：

尝试使用z-index CSS中的顺序更改为绿色，蓝色，红色。

#blue {
  background-color: blue;
  z-index: 2;
 }

 #red {
  background-color: red;
  z-index: 1;
 }

 #green {
  background-color: green;
  z-index: 3;
 }

如果需要在容器下面放置背景元素，请使用Z Index。你可以轻松地将背景放在每个元素下面，给它一个负Z指数，如下所示：

#background {
  z-index: -1;
 }

CSS z-index

可能的值

示例用法

更多CSS教程