css索引_CSS中的Z索引：它是什么以及它做什么

css索引

什么是Z索引？ (What is a Z Index?)

Z Index (z-index) is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index.

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

Note: Z index only works on positioned elements (position:absolute, position:relative, or position:fixed).

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

可能的值 (Possible Values)

/* 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索引 (How to use the Z Index )

In this example, you can see three boxes displayed on top of each other in different orders using z-index.

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

HTML

HTML

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

CSS

CSS

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

#green {
  background-color: green;
}

Since z-index wasn’t defined, it will have a default value of auto. This is a result:

由于未定义z-index ，因此它将具有默认值auto 。 结果是：

Try to change the order to Green, Blue, Red in CSS using z-index.

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

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

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

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

Your result will be:

您的结果将是：

Use Z Index if you need to put a background element below a container. You can easily place the background under every element by giving it a negative Z Index like below:

如果需要在容器下面放置背景元素，请使用Z索引。 您可以通过为负负Z索引轻松地将背景放置在每个元素下，如下所示：

#background {
  z-index: -1;
}

翻译自: https://www.freecodecamp.org/news/z-index-in-css-what-it-is-and-what-it-does/

css索引