<div 始終在上
<div 始終在上 是一種常見的 CSS 布局技巧，它通過設置 CSS 屬性來使一個元素始終固定在頁面的頂部。無論用戶滾動頁面多少，該元素都會保持在可見區域的頂部位置。在本文中，我們將通過幾個代碼案例來詳細解釋和說明這個技巧的實現方式。
案例一：使用 position: sticky 屬性
position: sticky 是一種相對定位的方式，它可以使一個元素在滾動過程中根據設置的偏移值停留在指定位置。要實現<div 始終在上的效果，只需將該元素的 position 屬性設置為 sticky，然后通過 top、bottom、left 或 right 屬性設置偏移值即可。

<pre>css
<style>
.container {
height: 2000px;   /* 設置容器高度，使其可以滾動 */
}
<br>
    .sticky {
position: sticky;
top: 0;
}
</style>

html <div class="container"> <div class="sticky">我始終在上</div> <!-- 其他頁面內容 --> </div>
在上面的代碼中，設置了一個容器 div ，高度為 2000px，以便能夠滾動。然后，在容器中定義了一個要保持在頂部的 div ，類名為 sticky 。通過設置 .sticky 的 position 為 sticky，以及 top 為 0 ，即可實現該元素始終在頁面頂部的效果。
案例二：使用 flexbox 布局
另一種常見的實現方式是使用 flexbox 布局。通過將容器設置為 display: flex 和 flex-direction: column ，再加上使用 order 屬性來調整順序，可以達到<div 始終在上的效果。

<pre>css
<style>
.container {
display: flex;
flex-direction: column;
height: 2000px;   /* 設置容器高度，使其可以滾動 */
}
<br>
    .sticky {
order: -1;
}
</style>

html <div class="container"> <div class="sticky">我始終在上</div> <!-- 其他頁面內容 --> </div>
在上面的代碼中，同樣先設置了一個容器 div ，高度為 2000px。然后，通過設置容器的 display 為 flex 和 flex-direction 為 column ，以及設置需要固定在頂部的 div 的 order 為 -1 ，即可實現該元素始終在頁面頂部的效果。
：
通過以上兩個案例，我們可以看到，實現<div 始終在上的效果并不難。我們可以使用 position: sticky 屬性或者使用 flexbox 布局來實現。這些方法在實際開發中經常被使用，為我們提供了更加靈活的布局方式。我們可以根據實際需求選擇適合的方法來實現<div 始終在上的效果，提升用戶體驗。