CSS z-index属性

In the positioning post I mentioned that you can use the z-index property to control the Z axis positioning of elements.

在定位文章中，我提到可以使用z-index属性来控制元素的Z轴定位。

It’s very useful when you have multiple elements that overlap each other, and you need to decide which one is visible, as nearer to the user, and which one(s) should be hidden behind it.

当您有多个相互重叠的元素，并且需要确定哪个元素离用户更近，以及哪些元素应该隐藏在元素后面时，此功能非常有用。

This property takes a number (without decimals) and uses that number to calculate which elements appear nearer to the user, in the Z axis.

此属性采用一个数字(不带小数点)，并使用该数字来计算Z轴上哪些元素看起来更靠近用户。

The higher the z-index value, the more an element is positioned nearer to the user.

z索引值越高，元素越靠近用户放置。

When deciding which element should be visible and which one should be positioned behind it, the browser does a calculation on the z-index value.

当确定哪个元素应该可见以及哪个元素应该位于其后时，浏览器将对z-index值进行计算。

The default value is auto, a special keyword. Using auto, the Z axis order is determined by the position of the HTML element in the page - the last sibling appears first, as it’s defined last.

默认值为auto ，这是一个特殊的关键字。 使用auto ，Z轴顺序由页面中HTML元素的位置确定-最后一个同级首先出现，因为它的定义最后。

By default elements have the static value for the position property. In this case, the z-index property does not make any difference - it must be set to absolute, relative or fixed to work.

默认情况下，元素具有position属性的static值。 在这种情况下， z-index属性没有任何区别-必须将其设置为absolute ， relative或fixed才能起作用。

Example:

例：

.my-first-div {
	position: absolute;
	top: 0;
	left: 0;
	width: 600px;
	height: 600px;
	z-index: 10;
}

.my-second-div {
	position: absolute;
	top: 0;
	left: 0;
	width: 500px;
	height: 500px;
	z-index: 20;
}

The element with class .my-second-div will be displayed, and behind it .my-first-div.

将显示类为.my-second-div的元素，并在其后面显示.my-first-div 。

Here we used 10 and 20, but you can use any number. Negative numbers too. It’s common to pick non-consecutive numbers, so you can position elements in the middle. If you use consecutive numbers instead, you would need to re-calculate the z-index of each element involved in the positioning.

在这里，我们使用了10和20，但您可以使用任何数字。 负数也是如此。 选择不连续的数字很常见，因此您可以将元素放置在中间。 如果改用连续数字，则需要重新计算定位中涉及的每个元素的z索引。

翻译自: https://flaviocopes.com/css-z-index/