[分享]css元素被压在下层

在开发网页时，我们经常会遇到CSS元素被压在下层的情况。如下面的代码所示，我们使用绝对定位将图片放在文本上方：img { : absolute; top: 0; left: 0; } p { : re...

在开发网页时，我们经常会遇到CSS元素被压在下层的情况。

如下面的代码所示，我们使用绝对定位将图片放在文本上方：

img {
    position: absolute;
    top: 0;
    left: 0;
}

p {
    position: relative;
}

结果我们发现，图片被压在了文本下面，这是为什么呢？

这是因为在CSS中，元素的层叠顺序是由元素的定位方式和z-index属性来决定的。我们发现，文本段落使用的是相对定位，而图片使用了绝对定位。这意味着图片的定位是相对于文档流之外的。所以，即使我们设置了图片的z-index值为1，文本段落也会在它上面。

如何解决这个问题呢？

一种方法是通过提高文本段落的z-index值，将其置于图片之上。例如：

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

然后我们会发现，现在文本段落出现在了图片的上方。

总之，在开发网页时，要注意元素的层叠顺序，以避免元素被错误地压在下层。