CSS z-index属性

如何使用z-indexCSS中的属性

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

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

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

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

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

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

默认情况下,元素具有static的价值position财产。在这种情况下,z-index属性没有任何区别-必须将其设置为absoluterelative或者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教程: