CSS頭像以及頭像重疊是如今網頁設計中經常出現的一個技巧。通過使用CSS，我們可以輕松地創造出一個具有吸引力的頭像，把它應用到我們的網站上，為用戶帶來更加美好的體驗。

.avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background-image: url("avatar.png");
background-size: cover;
overflow: hidden;
position: relative;
}

我們可以通過上述代碼來創建一個圓形的頭像。其中，我們使用了border-radius屬性來制造出一個圓形。background-image屬性則允許我們上傳一張頭像圖片，這張圖片會被用作背景。通過overflow:hidden屬性，我們可以將超出圓形大小的部分隱藏起來。

我們還可以將多個頭像疊加在一起，創造出更為有趣的效果。

.avatar-stack {
position: relative;
z-index: 1;
margin-left: -12.5px;
}
.avatar-stack .avatar {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.avatar-stack .avatar + .avatar {
margin-left: 10px;
z-index: 1;
}

上述代碼將多個頭像疊加到一起，創造出一種“疊羅漢”式的效果。我們需要使用z-index屬性來指定每個頭像的層級，position屬性來將它們定位。在第二個頭像開始，我們將它們的margin-left調整為10px，以便頭像重疊在一起。

總結來說，CSS頭像和頭像重疊是一種簡單而有趣的網頁設計技巧，通過它們，我們可以讓我們的網站變得更加有趣和吸引人。