CSS的z-index属性的实例介绍

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

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

当你有多个元素相互重叠，而你需要决定哪一个是可见的，因为离用户更近，哪一个（或几个）应该隐藏在后面时，这就非常有用。

这个属性需要一个数字（不含小数），并使用这个数字来计算哪些元素在Z轴上看起来更靠近用户。

Z-index值越高，一个元素的位置就越靠近用户。

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

默认值是auto ，这是一个特殊的关键词。使用auto ，Z轴的顺序是由HTML元素在页面中的位置决定的--最后的兄弟姐妹出现在前面，因为它是最后定义的。

默认情况下，元素的position 属性的值是static 。在这种情况下，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-index。