CSS定位讓網頁設計變得更加靈活多變。其中一種很常用的定位方式是將元素固定在屏幕上的某個位置，不隨頁面滾動而移動。在CSS中，可以使用position和top、left、right、bottom屬性實現該功能。
如果想要讓一個元素一直保持在屏幕頂部，可以將其position屬性設為fixed，同時設置top為0。例如，下面的代碼可以讓一個固定的導航欄一直停留在頁面頂部：

nav {
position: fixed;
top: 0;
}

同樣地，可以將一個元素固定在頁面左側或右側：

#sidebar {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
}

上面的代碼讓側邊欄上下居中，并位于頁面右側。transform屬性用來對元素進行垂直方向的定位，將其向上或向下移動一定距離（這里是50%的高度）。
需要注意的是，當一個元素被固定在屏幕上時，其他元素可能會移動到該元素下面。解決這個問題的方式是，對固定元素的上方元素應用margin屬性，使它們保持一定距離。例如，在下面的代碼中，我們用了一個空的div元素來占據導航欄上方的空間：

nav {
position: fixed;
top: 0;
}
<br>
.placeholder {
height: 50px;
}

在HTML中，我們可以這樣使用該元素：

<div class="placeholder"></div>
<nav>
<!-- 導航欄內容 -->
</nav>

這樣就可以讓導航欄固定在頂部，并且不會使其他元素錯亂。
總之，通過CSS定位可以讓網頁元素在頁面中的位置變得更加靈活，使設計更加多樣化。掌握基礎的定位方式，可以讓我們更好地實現各種網頁設計的需求。