<div>是HTML中的一個常用標簽，用于定義文檔中的一個區域，可以將不同的元素組合在一起，形成一個整體。但是有時候我們希望<div>不隨窗口的大小改變而改變，保持固定的大小和位置。下面我將通過幾個代碼案例來詳細解釋如何實現這個效果。
案例一： 假設我們希望一個<div>在窗口的左上角固定位置，不管窗口如何改變，<div>的位置都保持不變。我們可以使用CSS中的position屬性來實現。先在HTML中創建一個<div>，并加上一個id作為標識。

<div id="fixedDiv">
這是一個固定的div。
</div>

接下來，在CSS中使用position:fixed來設置這個<div>的位置。

#fixedDiv {
position:fixed;
top:0;
left:0;
}

這樣，無論窗口如何改變，這個<div>都會保持在窗口的左上角。
案例二： 在一些情況下，我們希望一個<div>在窗口內居中顯示，并且不隨窗口大小改變而改變。同樣，我們可以使用position屬性來實現。
，在HTML中創建一個<div>，并設置一個固定的寬度和高度。

<div id="centerDiv">
這是一個居中顯示的div。
</div>

然后，在CSS中設置這個<div>的位置。

#centerDiv {
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:200px;
height:200px;
background-color:#ccc;
}

通過設置position為fixed，top和left為50%，再使用transform屬性來將<div>居中顯示，即可實現固定位置和不隨窗口大小改變而改變大小的效果。
案例三： 在某些情況下，我們希望一個<div>在窗口內始終保持固定的大小，但是隨著窗口的滾動而移動位置。我們可以結合使用position屬性和JavaScript來實現這個效果。
，在HTML中創建一個<div>，并設置一個固定的寬度和高度。

<div id="scrollDiv">
這是一個隨著窗口滾動而移動的div。
</div>

然后，使用CSS設置這個<div>的位置。

#scrollDiv {
position:fixed;
width:200px;
height:200px;
background-color:#ccc;
}

最后，使用JavaScript來監聽窗口滾動事件，并根據滾動的距離來改變<div>的位置。

window.addEventListener('scroll', function() {
var scrollDiv = document.getElementById('scrollDiv');
scrollDiv.style.top = window.scrollY + 'px';
});

這樣，無論窗口如何滾動，<div>都會保持固定的大小，并根據窗口滾動的距離而改變位置。
通過以上幾個案例，我們可以看到，通過合理運用CSS的position屬性和JavaScript的事件監聽，我們可以實現<div>不隨窗口的大小和滾動而改變的效果。這樣可以使頁面的布局更加靈活，同時提升用戶體驗。