CSS固定div是一種常用的網頁布局技術，它使得一個div元素能夠固定在瀏覽器窗口中的某一位置，不隨頁面滾動而移動。這種技術特別適用于需要保持某些內容始終可見、常駐在用戶視野中的情況，如導航菜單、登錄框等。

在CSS中，通過使用position屬性并將其值設置為fixed，可以實現固定div的效果。position屬性用于指定元素的定位類型，而fixed值則表示元素固定在窗口視口中的特定位置，不會隨滾動條的滾動而移動。接下來，讓我們通過幾個簡單的代碼案例來詳細解釋如何實現CSS固定div。

案例1：實現頂部固定導航欄

<style>
.top-nav {
position:fixed;
top:0;
left:0;
width:100%;
background-color:#f1f1f1;
padding:10px;
}
</style>
<br>
<div class="top-nav">
<a href="#">首頁</a>
<a href="#">新聞</a>
<a href="#">產品</a>
<a href="#">聯系我們</a>
</div>

在上述代碼中，我們創建了一個名為top-nav的div元素，并設置其position屬性為fixed，top屬性為0，left屬性為0，width屬性為100%。這使得導航欄固定在瀏覽器窗口的頂部，并且寬度隨窗口大小自動調整。通過為該div元素添加背景顏色和內邊距，可以美化導航欄的外觀。在div元素中，我們添加了若干個導航鏈接，用戶可以根據需要自行修改鏈接文本和地址。

案例2：實現底部固定版權信息

<style>
.footer {
position:fixed;
bottom:0;
left:0;
width:100%;
background-color:#f1f1f1;
padding:10px;
text-align:center;
}
</style>
<br>
<div class="footer">
<p>版權所有 (c) 2022 公司名稱。保留所有權利。</p>
</div>

在上述代碼中，我們創建了一個名為footer的div元素，并設置其position屬性為fixed，bottom屬性為0，left屬性為0，width屬性為100%。這使得版權信息欄固定在瀏覽器窗口的底部，并且寬度隨窗口大小自動調整。通過為該div元素添加背景顏色和內邊距，可以美化版權信息欄的外觀。在div元素中，我們添加了一個段落，用于顯示公司的版權信息。

通過上述兩個案例，我們可以看到，通過簡單的CSS樣式設置，我們就可以實現固定div元素的效果。這為我們在網頁設計中添加常駐元素提供了便利，使得用戶可以更方便地瀏覽和操作網頁內容。當然，除了頂部導航欄和底部版權信息欄，你還可以根據自己的需求和創意，使用CSS固定div技術實現更多其他類型的固定元素。