CSS z 索引属性

我之前提到过，Z 索引功能允许您控制元素的 Z 轴位置。

当您有多个重叠的元素并且您需要决定哪个元素可见且更靠近用户以及哪个元素（或多个元素）应隐藏在其后面时，这非常有用。

该属性接受一个数字（不带小数）并使用它来计算哪个 Z 轴元素更接近用户。

z-index 值越高，元素离用户越近。

浏览器在决定哪个元素应该可见以及哪个元素应该放置在其后面时会计算 z-index 值。

默认值为auto，特殊关键字。在自动模式下，Z 轴的顺序由 HTML 元素在页面上的位置决定 - 最后一个同级元素首先出现，因为它是最后一个定义的。

默认情况下，元素的位置属性具有静态值。在这种情况下，z-index 属性是无关紧要的 - 它必须设置为绝对、相对或固定才能工作。

示例

.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-index。