CSS圓形頭像疊加排列，是一種比較常見的布局方式，可以方便地在網頁中顯示多個頭像。本文將簡要介紹如何使用CSS實現圓形頭像的疊加排列效果。

/*CSS代碼*/
.avatar-wrap{
position:relative;
display:inline-block;
margin-right:20px;
}
.avatar-wrap .avatar{
position:absolute;
width:50px;
height:50px;
border-radius:50%;
background-color:#ffffff;
box-shadow:rgba(0,0,0,0.15) 0 2px 6px;
}
.avatar-wrap .avatar:first-child{
z-index:2;
}
.avatar-wrap .avatar:last-child{
left:10px;
z-index:1;
transform:rotate(20deg);
}
.avatar-wrap .avatar:nth-child(2){
left:5px;
z-index:3;
transform:rotate(-20deg);
}

上述代碼創建了一個.avatar-wrap（頭像容器）元素，內部包含多個.avatar（頭像）元素。通過給.avatar-wrap設置position:relative，可以讓內部的.avatar元素以此為參考點進行定位。

.avatar-wrap .avatar:first-child通過設置z-index的值為2，將其中第一個頭像設為最上層。.avatar-wrap .avatar:last-child為設置倒數第一個頭像的位置和旋轉角度。.avatar-wrap .avatar:nth-child(2)則為設置倒數第二個頭像的位置和旋轉角度。

注意：以上代碼僅是實現圓形頭像疊加排列的示例之一，可以根據自己的需要進行修改。