CSS z-index属性

以前俺提到过可以使用Z -index属性来控制元素的Z轴定位。

当您有多个相互重叠的元素，并且您需要决定哪个元素是可见的、离用户更近的，以及哪个(或多个)元素应该隐藏在它后面时，这是非常有用的。

此属性接受一个数字(不含小数)，并使用该数字计算Z轴中哪个元素更接近用户。

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

当决定哪个元素应该是可见的，哪个元素应该放在它后面时，浏览器会计算z-index值。

默认值是auto，一个特殊的关键字。使用auto, Z轴顺序由HTML元素在页面中的位置决定——最后一个兄弟元素首先出现，因为它是最后定义的。

默认情况下，元素具有position属性的静态值。在这种情况下，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索引。