css上层图片被下层图片覆盖

CSS中上层图片被下层图片覆盖是一种常见的问题。这种情况通常发生在我们在网页上添加多个图片时。

 .img1{
        position:relative;
        z-index:1;
    }
    .img2{
        position:relative;
        z-index:2;
    } 

让我们来解释一下这个代码。首先，我们给每个图片设定了一个CSS类。img1代表下层图片，img2代表上层图片。然后，我们使用了两个CSS属性：position和z-index。

position属性告诉浏览器如何定位元素。在这个例子中，我们使用了相对定位，这意味着图片将保持其原始位置，但可以通过top和left属性在水平和垂直方向上移动。

z-index属性定义了元素的堆叠顺序。在这个例子中，我们将下层图片（img1）的z-index设置为1，将上层图片（img2）的z-index设置为2。这意味着img2将覆盖img1，因为它们的层叠顺序是根据它们的z-index属性决定的。

通过使用这些属性，我们可以轻松地控制网页上不同元素的层叠顺序，以确保它们按预期显示。