[分享]css两张图片重叠顺序

CSS中的zindex属性可以控制元素的层叠顺序，当两个元素产生重叠时，zindex值较大的元素会覆盖zindex值较小的元素。/ zindex值较小的元素在下面 / element1 { : abs...

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值会被忽略。