[分享]css中如何让图片层叠在一起

在CSS中，通过zindex属性可以控制元素的层叠顺序。zindex属性的值越大，元素就越靠近屏幕上方。img{ : absolute; zindex: 1; } 上述代码使得img元素具有了绝对定位...

在CSS中，通过z-index属性可以控制元素的层叠顺序。z-index属性的值越大，元素就越靠近屏幕上方。

img{
    position: absolute;
    z-index: 1;
} 

上述代码使得img元素具有了绝对定位和z-index属性为1的特性，使其位于其他元素上方。

div{
    position: relative;
    z-index: 2;
} 

而对于div元素，我们可以将其设置为相对定位并将z-index属性设为2，这样就可以使它在位于img元素之上了。

如果想让多张图片层叠在一起，可以将它们都设置为绝对定位和相同的z-index属性：

img{
    position: absolute;
    z-index: 1;
}
img:nth-child(2){
    z-index: 2;
}
img:nth-child(3){
    z-index: 3;
} 

这样就可以实现多张图片的层叠了，其中第一个img元素位于最下方，第二个位于第一个上方，以此类推。