CSS的層疊機制使得我們能夠在文檔中創建多層的樣式，并且可以按照一定優先級進行覆蓋與繼承。其中一個重要的概念就是CSS中層疊上下文的形成。

層疊上下文是一種 CSS 3 的元素上下文環境的概念，它是一個獨立的渲染區域，一旦形成了層疊上下文，它內部的元素之間的渲染有一定的相互影響關系。

一個層疊上下文參考如下：

.box1 {
background-color: #fff;
border: 1px solid #000;
padding: 20px;
position: relative;
z-index: 1; 
}

如上代碼，層疊上下文是由position和z-index決定的。position默認值是static，不會創建層疊上下文。而當值為relative、absolute、fixed，或者z-index的值不為auto的元素，會創建層疊上下文。

層疊上下文中圖層的堆放順序是由以下幾項決定的：

• z-index的值越大，越靠近層疊頂部
• 沒有z-index屬性或者z-index為auto的元素不在特定的層疊順序中
• 層疊順序相同時，后面的元素會覆蓋前面的元素

理解了層疊上下文對CSS的影響是十分必要的。正確地使用層疊上下文可以簡化CSS代碼邏輯，提高性能。