<div> 居頂是指將一個<div>元素置于其父元素的頂部位置，以實現頁面布局的需求。在網頁設計中，經常需要使用<div>元素來劃分網頁的不同部分，如頁眉、正文和頁腳等。而通過設置<div>元素的樣式屬性，可以輕松地使其居于頁面的頂部位置，增加頁面的美觀度和可讀性。
下面將通過幾個代碼案例來詳細解釋如何實現<div>居頂的效果。
案例一：使用絕對定位

html
<style>
.parent {
position: relative; /* 設置父元素相對定位 */
}
<br>
.child {
position: absolute; /* 設置子元素絕對定位 */
top: 0; /* 定位到父元素的頂部位置 */
}
</style>
<br>
<div class="parent">
<div class="child">
這是一個居于頂部位置的<div>元素
</div>
</div>

在上述代碼中，通過將父元素設置為相對定位，將子元素設置為絕對定位，并將其top屬性設置為0，即使<div>元素居于父元素的頂部位置。
案例二：使用flex布局

html
<style>
.parent {
display: flex;
justify-content: flex-start;
}
<br>
.child {
align-self: flex-start; /* 設置子元素自身的對齊方式為頂部對齊 */
}
</style>
<br>
<div class="parent">
<div class="child">
這是一個居于頂部位置的<div>元素
</div>
</div>

上述代碼中，通過將父元素設置為flex布局，并設置其justify-content屬性為flex-start，即可讓子元素居于頂部位置。
案例三：使用網格布局

html
<style>
.parent {
display: grid;
}
<br>
.child {
align-self: start; /* 設置子元素自身的對齊方式為頂部對齊 */
}
</style>
<br>
<div class="parent">
<div class="child">
這是一個居于頂部位置的<div>元素
</div>
</div>

在上述代碼中，通過將父元素設置為網格布局，并設置子元素的align-self屬性為start，即可將<div>元素居于頂部位置。
通過以上幾個代碼案例的介紹，我們可以看到，在網頁設計中，使用<div>元素進行布局是非常常見的操作。而通過設置不同的樣式屬性，可以實現<div>元素居于頂部的效果，使頁面的布局更加美觀和靈活。無論是使用絕對定位、flex布局還是網格布局，都可以實現<div>元素的居頂效果，根據實際需求選擇相應的方法即可。希望本文對您有所幫助！</div>