本文目錄導(dǎo)讀：

1. 使用CSS定位實(shí)現(xiàn)圖片層疊
2. 使用z-index實(shí)現(xiàn)圖片層疊

CSS中的圖片層疊技巧

在網(wǎng)頁(yè)設(shè)計(jì)中，圖片層疊是一種常用的技巧，能夠創(chuàng)造出豐富的視覺(jué)效果和交互體驗(yàn)，在CSS中，我們可以利用一些技巧來(lái)實(shí)現(xiàn)圖片的層疊效果，本文將介紹如何利用CSS進(jìn)行圖片層疊，并展示一些實(shí)用的技巧。

使用CSS定位實(shí)現(xiàn)圖片層疊

1、相對(duì)定位（position:relative）

通過(guò)相對(duì)定位，我們可以調(diào)整圖片的位置，實(shí)現(xiàn)層疊效果，給需要層疊的圖片設(shè)置相對(duì)定位，然后通過(guò)調(diào)整top、right、bottom、left屬性，使圖片重疊在一起。

示例代碼：

img {
  position: relative;
  top: -50px; /* 調(diào)整上下位置 */
  left: 30px; /* 調(diào)整左右位置 */
}

2、***定位（position:absolute）

***定位可以使圖片相對(duì)于***近的已定位祖先元素進(jìn)行定位，如果沒(méi)有已定位的祖先元素，那么它會(huì)相對(duì)于初始包含塊進(jìn)行定位，利用***定位，我們可以將圖片***地放置在頁(yè)面的任何位置，實(shí)現(xiàn)層疊效果。

示例代碼：

img {
  position: absolute;
  top: 50px; /* 調(diào)整上下位置 */
  left: 100px; /* 調(diào)整左右位置 */
}

使用z-index實(shí)現(xiàn)圖片層疊

z-index屬性用于設(shè)置元素的堆疊順序，具有更高z-index值的元素將覆蓋具有較低z-index值的元素，通過(guò)調(diào)整z-index值，我們可以實(shí)現(xiàn)圖片的層疊效果。

示例代碼：

img1 {
  z-index: 1; /* 圖片1的堆疊順序 */
}
img2 {
  z-index: 2; /* 圖片2的堆疊順序，圖片2將覆蓋圖片1 */
}

通過(guò)相對(duì)定位、***定位和z-index屬性，我們可以輕松地在CSS中實(shí)現(xiàn)圖片的層疊效果，這些技巧在網(wǎng)頁(yè)設(shè)計(jì)中非常實(shí)用，可以創(chuàng)造出豐富的視覺(jué)效果和交互體驗(yàn)，在實(shí)際應(yīng)用中，我們可以根據(jù)需求選擇適當(dāng)?shù)募记蓙?lái)實(shí)現(xiàn)圖片的層疊效果。