css 图片为什么会重叠

CSS（层叠样式表）是网页设计中不可或缺的一部分，它可以控制网页中的各种元素的样式和布局。其中一种常见的问题就是图片重叠。那么为什么会出现图片重叠的情况呢？

    img {
        position: absolute;
        left: 100px;
        top: 100px;
    }

首先，我们来看一下上面这段 CSS 代码中用到的 position 属性。它用来指定元素的定位方式，absolute 表示绝对定位。这意味着，该元素将相对于其父元素中最近的已定位祖先元素进行定位。

接着，我们再来看一下 left 和 top 属性。它们分别用来指定元素相对于其父元素左侧和顶部的距离。

因此，如果我们将多个图片设置为绝对定位，并让它们的 left 和 top 值相同，那么就会出现重叠的情况。

    .img1 {
        position: absolute;
        left: 100px;
        top: 100px;
    }
    
    .img2 {
        position: absolute;
        left: 100px;
        top: 100px;
    }

解决这个问题的方法也很简单，我们只需要将每个图片的 left 和 top 值设置为不同的值即可。

    .img1 {
        position: absolute;
        left: 100px;
        top: 100px;
    }
    
    .img2 {
        position: absolute;
        left: 200px;
        top: 200px;
    }

以上就是图片重叠问题的解决方法，希望对你有所帮助。