在編寫網頁時，我們常常會遇到一個問題，就是左側的導航欄需要固定位置，而右側的內容隨著滾動而滾動，這個實現起來也比較簡單，只需要使用CSS就可以了，接下來我將為大家分享兩種實現左側固定位置的方法。

方式一：使用position: fixed實現

/* 導航欄固定在左側 */
.nav {
position: fixed;
left: 0;
top: 0;
width: 200px;
height: 100%;
}
/* 右側內容跟隨滾動 */
.content {
margin-left: 200px;
}

通過設置導航欄的position屬性為fixed，left屬性為0，top屬性為0，就可以使導航欄固定在左側。然后為導航欄設置一個寬度和高度，使其適配屏幕。最后通過給右側內容添加一個margin-left屬性，讓內容跟著導航欄向右移動。

方式二：使用flex布局實現

/* 父容器用flex布局 */
.container {
display: flex;
}
/* 導航欄固定在左側 */
.nav {
width: 200px;
height: 100%;
}
/* 右側內容跟隨滾動 */
.content {
flex: 1;
}

通過設置父容器為flex布局，子元素就可以根據需要設置寬度了，然后將導航欄的寬度設置好，右側內容的flex屬性設置為1，就可以讓內容根據自身大小填充剩余空間，從而實現左側固定位置。

以上就是兩種實現左側固定位置的方法，大家可以根據自己的實際情況進行選擇使用。