<div> 窗口固定是指在網頁中某個區域的位置固定不動，無論用戶如何滾動頁面，這個區域都會保持在頁面的相對位置。這對于創建導航欄、側邊欄或懸浮廣告等元素非常有用，可以始終保持它們的可見性。
<div> 窗口固定可以通過CSS中的position屬性來實現。在設置position屬性時，可以使用值fixed來創建一個固定定位的元素。固定定位的元素相對于瀏覽器視窗進行定位，而不是相對于頁面的其他元素。
下面我們來看幾個具體的代碼案例。

1. 將導航欄固定在頁面頂部

<style>
.navbar {
position: fixed;
top: 0;
width: 100%;
background-color: #f1f1f1;
padding: 10px;
}
</style>
<div class="navbar">
<p>這是導航欄的內容</p>
</div>

在這個案例中，我們定義了一個類名為navbar的div元素，并將其position屬性設置為fixed。設置top屬性為0，表示將導航欄固定在頁面的頂部。通過設置width屬性為100%，使導航欄占滿整個頁面的寬度。最后，設置一個背景顏色和padding屬性來美化導航欄的樣式。在div元素中間，我們可以添加導航欄的具體內容。

2. 左側固定的懸浮菜單

<style>
.sidebar {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 200px;
background-color: #f1f1f1;
padding: 10px;
}
</style>
<div class="sidebar">
<p>這是菜單的內容</p>
</div>

在這個示例中，我們創建了一個類名為sidebar的div元素，并將其position屬性設置為fixed。通過設置left屬性為0將菜單固定在頁面的左側。接著，設置top屬性為50%，并通過transform屬性來使菜單在垂直方向上居中。設置一個固定的寬度、背景顏色和padding屬性來修飾菜單的樣式。在div元素中間，我們可以添加具體的菜單項。

3. 懸浮商品廣告

<style>
.ad {
position: fixed;
right: 10px;
bottom: 10px;
width: 200px;
height: 200px;
background-color: #f1f1f1;
padding: 10px;
}
</style>
<div class="ad">
<p>這是廣告的內容</p>
</div>

在這個案例中，我們創建了一個類名為ad的div元素，并將其position屬性設置為fixed。通過設置right屬性和bottom屬性來將廣告固定在頁面的右下角。設置一個固定的寬度、高度、背景顏色和padding屬性來美化廣告的樣式。在div元素中間，我們可以添加廣告的具體內容。
通過以上這些案例，我們可以看到如何使用<div> 窗口固定來實現不同的效果。無論是導航欄、懸浮菜單還是廣告，只要通過設置position屬性為fixed，并調整相應的top、bottom、left、right屬性，就可以實現元素的固定定位。這種技術可以為網頁設計帶來更多的創意和交互效果。