在網(wǎng)頁制作中，有時候需要在同一位置切換不同的元素或圖片，這時候就需要使用css上下層換。

下面是一個簡單的示例，通過點擊不同的按鈕，實現(xiàn)三個塊的切換。

/* css樣式 */
#block1 {
background-color: red;
height: 100px;
width: 200px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#block2 {
background-color: blue;
height: 100px;
width: 200px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
#block3 {
background-color: green;
height: 100px;
width: 200px;
position: absolute;
top: 0;
left: 0;
z-index: 3;
}

在css中，z-index屬性可以控制元素的層級，數(shù)值越大的元素顯示在越上層。

在上面的示例中，block1的z-index為1，最下層級，block3的z-index為3，最上層級。

通過javascript或jquery監(jiān)聽按鈕點擊事件，動態(tài)改變需要顯示的塊的z-index即可實現(xiàn)切換效果。

需要注意的是，在所有需要切換的塊的樣式中，position屬性都需要設置為absolute或fixed，這樣才能讓塊在同一位置上下層切換。