CSS上下div位置對調 當我們在設計web頁面的時候，有時需要交換上下兩個div的位置。這時候，我們可以很容易地實現這個功能，而無需修改HTML代碼。下面，我們來看看如何使用CSS來交換上下兩個div的位置。 首先，我們需要兩個div，一個帶有class"top"，另一個帶有class"bottom"。我們的HTML代碼應該是這樣的：

<div class="top">
<p>這是上面的div</p>
</div>
<div class="bottom">
<p>這是下面的div</p>
</div>

現在，我們需要使用CSS來實現上下div位置互換。我們可以使用CSS Flexbox或CSS Grid來實現。 #### 使用CSS Flexbox 使用CSS Flexbox可以很容易地實現上下div位置對調。我們只需要將它們的flex方向從父容器的默認值（從左到右）更改為從上到下。這里是CSS代碼：

.container {
display: flex;
flex-direction: column; /* 將flex方向從左到右改為從上到下 */
}
.top {
order: 2; /* 將上面的div在其兄弟元素中的順序設置為2 */
}
.bottom {
order: 1; /* 將下面的div在其兄弟元素中的順序設置為1 */
}

####使用CSS Grid 也可以使用CSS Grid來實現上下div位置對調。我們可以使用grid-area屬性來命名每個div，然后使用grid-template-areas屬性來指定它們的位置。這里是CSS代碼：

.container {
display: grid;
grid-template-areas: "bottom" "top"; /* 反轉grid元素的排列順序 */
}
.top {
grid-area: top; /* 給上面的div添加網格區域命名 */
}
.bottom {
grid-area: bottom; /* 給下面的div添加網格區域命名 */
}

以上兩種方法都可以很容易地實現上下div位置對調。根據不同的需求，選擇適合自己的方法即可。