1. 犀牛前端部落首页
  2. CSS教程

CSS z-index属性

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索引。

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/4545.html

发表评论

登录后才能评论