解決CSS圖片遮擋文字的方法

在CSS中，圖片遮擋文字是一個常見的問題，由于CSS樣式表的強(qiáng)大，我們可以輕松地解決它，以下是幾種常用的方法：

1、使用z-index屬性

z-index屬性用于設(shè)置元素的堆疊順序，較高的z-index值將顯示在較低的z-index值之上，您可以將文字的z-index值設(shè)置為高于圖片的z-index值，以確保文字始終顯示在圖片之上。

.text {
    z-index: 10;
    position: relative;
}
.image {
    z-index: 5;
    position: relative;
}

2、使用position屬性

position屬性用于設(shè)置元素的定位類型，您可以設(shè)置文字的position屬性為absolute或relative，并將其放置在圖片之上，這樣，文字就不會被圖片遮擋了。

.text {
    position: absolute;
    top: 0;
    left: 0;
}
.image {
    position: relative;
}

3、使用display屬性

display屬性用于設(shè)置元素的顯示類型，您可以設(shè)置文字的display屬性為block或inline-block，并將其放置在圖片之上，這樣，文字就不會被圖片遮擋了。

.text {
    display: block;
}
.image {
    display: inline-block;
}