CSS 堆棧順序指的是瀏覽器渲染網頁時，CSS樣式應用的順序。在開發網頁時，我們可能會遇到不同層級的元素疊在一起，而CSS 堆棧順序便是控制這種疊放順序的重要機制。 CSS 堆棧順序共分為五層，它們以不同的順序覆蓋在一起，形成元素的疊放順序： 1. 最底層：背景層 2. 第二層：邊界層 3. 第三層：塊級父元素層，包括元素的 padding 和 border 4. 第四層：浮動層 5. 最頂層：定位層 按照上述順序，越靠后的層級會越覆蓋前面的層級。例如，定位層會覆蓋浮動層和塊級父元素層等。 要注意的是，CSS 堆棧順序也能受到 z-index 屬性的影響。z-index 屬性的值越大，元素越靠近頂層。如果兩個相鄰元素的 z-index 值相同，則 CSS 堆棧順序會決定它們的堆疊順序。 下面是一個示例代碼，演示如何使用 CSS 堆棧順序來控制元素的疊放順序：

<style>
#bottom {
width: 200px;
height: 200px;
background-color: #888;
position: relative;
z-index: 1;
}
#top {
width: 150px;
height: 150px;
background-color: #f00;
position: relative;
z-index: 2;
top: -50px;
left: 25px;
}
</style>
<p>點擊下面的正方形，可以看到紅色的正方形覆蓋在藍色的正方形之上。</p>
<div id="bottom"></div>
<div id="top"></div>

在上面的代碼中，我們將 #bottom 看做第一層背景層，將 #top 看做第五層定位層，并給它們分別指定了 z-index 屬性，使紅色正方形位于藍色正方形之上。 通過理解和運用 CSS 堆棧順序，我們可以輕松地控制網頁元素的疊放順序，從而使網頁視覺效果更加出色，呈現出更好的用戶體驗。