CSS 是一種用來定義網頁樣式的語言，通過使用 CSS，我們可以將網頁元素以各種方式進行布局和排列。其中，設置 div 元素的位置是 CSS 中非常常見且重要的任務之一。本文將介紹如何使用 CSS 將一個 div 元素的位置設置為另一個 div 元素的下方。
下面我們來看幾個代碼案例，詳細說明如何實現這一效果。
案例一： 這個案例中，我們有兩個 div 元素，一個帶有 id 為 "div1"，另一個帶有 id 為 "div2"。我們希望 "div2" 的位置在 "div1" 的下方。我們可以通過 CSS 的定位屬性來實現這個效果。

html
<p>，我們需要在 CSS 文件或者 style 標簽中對這兩個 div 元素進行樣式的定義，給它們設置寬度、高度等屬性。</p>
<pre>
<style>
#div1 {
width: 200px;
height: 200px;
background-color: lightblue;
}
#div2 {
width: 200px;
height: 200px;
background-color: lightgreen;
position: relative;
top: 220px;
}
</style>

然后，在 HTML 中使用這兩個 div 元素，確保它們的 id 屬性與 CSS 中定義的一致。

<div id="div1">
<p>這是 div1。</p>
</div>
<br>
<div id="div2">
<p>這是 div2。</p>
</div>

在上述代碼中，我們給 "div2" 設置了相對定位（position: relative;），并通過 top 屬性指定了其距離 "div1" 的頂部距離（top: 220px;）。這樣，"div2" 的位置就會相對于 "div1" 向下移動 220px。
案例二： 在這個案例中，我們同樣有兩個 div 元素，但是這次我們希望 "div2" 的位置根據 "div1" 的高度自動調整，以保證 "div2" 始終緊跟在 "div1" 的下方。
我們可以使用 CSS 的浮動屬性來實現這個效果。html

同樣，我們需要在 CSS 文件或者 style 標簽中對這兩個 div 元素進行樣式的定義。

<style>
#div1 {
width: 200px;
height: 200px;
background-color: lightblue;
}
#div2 {
width: 200px;
height: 200px;
background-color: lightgreen;
float: left;
clear: both;
}
</style>

然后，在 HTML 中使用這兩個 div 元素。

<div id="div1">
<p>這是 div1。</p>
</div>
<br>
<div id="div2">
<p>這是 div2。</p>
</div>

在上述代碼中，我們給 "div2" 設置了浮動（float: left;），這樣 "div2" 就會浮動在 "div1" 的下方。通過給 "div2" 添加 clear 屬性（clear: both;），可以確保 "div2" 在 "div1" 的下方顯示，并在兩個 div 之間創建一個換行。
這樣，無論 "div1" 的高度如何變化，"div2" 的位置都會始終保持在 "div1" 的下方。
綜上所述，通過使用 CSS 的定位屬性或者浮動屬性，我們可以輕松地設置一個 div 元素的位置為另一個 div 元素的下方。無論是通過設置相對定位，還是使用浮動屬性，我們都可以根據具體的需求，靈活地進行布局和排列。
參考文章： - "CSS Positioning 101" by Matthew James Taylor (https://matthewjamestaylor.com/css-positioning/) - "CSS Floats 101" by Rachel Andrew (https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats)