頭像疊加是一種常用的設計技巧，可使頁面視覺效果更加生動、有趣。疊加多個頭像，可以讓人們更直觀地了解到該用戶的個性特點，增加用戶的粘性。下面我們來學習如何使用CSS來實現頭像疊加。

.avatar-container {
position: relative;
}
.avatar-container img {
width: 80px; 
height: 80px; 
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
}
.avatar-container .top-avatar {
z-index: 2;
transform: translate(15px, -15px);
}
.avatar-container .bottom-avatar {
z-index: 1;
transform: translate(30px, -30px);
}

首先，我們給頭像容器容器設置position:relative屬性，讓內部元素的position:absolute屬性相對于其進行定位。

其次，我們需要為多個頭像設置一個共同的類“avatar-container”，并設置頭像的大小、圓角屬性和position:absolute屬性。其中，使用特定的top和left值可以讓底部頭像覆蓋在頂部頭像中心的部分。

最后，我們為不同的頭像設置不同的類名，“top-avatar”和“bottom-avatar”，并設置其z-index屬性。通過調整不同頭像的transform屬性，我們可以實現頭像的疊加效果。

以上是頭像疊加的CSS實現方法。通過這個簡單的技巧，我們可以提升頁面的美觀度和交互性，讓用戶更容易地理解并使用網站或應用。希望本文對您有所幫助！