CSS中的z-index属性可以控制元素的层叠顺序,当两个元素产生重叠时,z-index值较大的元素会覆盖z-index值较小的元素。/* z-index值较小的元素在下面 */ #element1
CSS中的z-index属性可以控制元素的层叠顺序,当两个元素产生重叠时,z-index值较大的元素会覆盖z-index值较小的元素。
/* z-index值较小的元素在下面 */ #element1 { position: absolute; z-index: 1; } #element2 { position: absolute; z-index: 2; }
如果两个元素的z-index值相同,那么它们的层叠顺序将由它们在文档流中的位置决定,后出现的元素将覆盖先出现的元素。
/* 后出现的元素在上面 */ #element1 { position: absolute; z-index: 1; } #element2 { position: absolute; z-index: 1; }
除了使用数值为正整数的z-index值,我们还可以使用数值为负数的z-index值。使用负数的z-index值可以使元素置于其他元素下面,例如背景图片。
/* 负数z-index值元素在下面 */ #background { position: fixed; top: 0; left: 0; z-index: -1; } #content { position: relative; z-index: 1; }
需要注意的是,z-index只能应用在具有定位属性(position)的元素上。如果某个元素没有定位属性,那么它的z-index值会被忽略。
粉丝
0
关注
0
收藏
0