CSS z-index属性

如何使用`z-index`CSS中的属性

在里面定位柱我提到您可以使用z-index属性来控制元素的Z轴定位。

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

此属性采用一个数字（不带小数点），并使用该数字来计算Z轴上哪些元素显示得更靠近用户。

z-index值越高，元素越靠近用户放置。

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

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

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

例子：

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

类的元素.my-second-div将显示在它的后面.my-first-div。

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

免费下载我的CSS手册

CSS z-index属性

如何使用z-indexCSS中的属性

更多CSS教程：

如何使用`z-index`CSS中的属性