CSS疊加條形圖是一種常見的數據可視化方式，它能夠清晰地展示各個數據部分之間的比較關系。

下面我們將通過一些簡單的代碼演示如何使用CSS來創建一個疊加條形圖：

<div class="wrapper">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
/* CSS 樣式 */
.wrapper {
width: 300px;
height: 200px;
border: 1px solid #666;
position: relative;
}
.bar1, .bar2, .bar3 {
position: absolute;
bottom: 0;
width: 50px;
margin: 0 10px;
}
.bar1 {
height: 100px;
background-color: #f24c27;
}
.bar2 {
height: 120px;
background-color: #5f5f5f;
}
.bar3 {
height: 80px;
background-color: #008aff;
left: 70px;
}

在上面的代碼當中，我們首先創建了一個父容器wrapper，作為整個條形圖的外框。

然后，我們創建了三個子元素bar1、bar2、bar3來表示三個數據部分。這三個元素都是設置為絕對定位，位于父容器的底部。

根據不同的數據，我們設置了不同的高度和顏色，并且通過設置left和margin來實現疊加的效果。

最終，我們得到了一個簡單的CSS疊加條形圖，它能夠很好地展示各個數據部分的比較關系。