要控制CSS滾動條的位置，可以使用CSS的overflow屬性和scrollbar的偽類選擇器來實現。
1. 使用overflow屬性控制滾動條的顯示方式：
- 如果要顯示垂直滾動條，可以使用`overflow-y: scroll;`。
- 如果要顯示水平滾動條，可以使用`overflow-x: scroll;`。
- 如果要同時顯示垂直和水平滾動條，可以使用`overflow: scroll;`。
2. 使用scrollbar偽類選擇器控制滾動條的樣式和位置：
- 使用`::-webkit-scrollbar`來選擇滾動條本身。
- 使用`::-webkit-scrollbar-thumb`來選擇滾動條的滑塊。
- 使用`::-webkit-scrollbar-track`來選擇滾動條的軌道。
下面是一個示例，演示如何使用CSS控制滾動條的位置：
CSS:
```css
.scroll-container {
width: 300px;
height: 200px;
overflow: scroll;
}
.content {
width: 1000px;
height: 1000px;
}
/* 控制滾動條樣式 */
.scroll-container::-webkit-scrollbar {
width: 12px;
}
.scroll-container::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 6px;
}
.scroll-container::-webkit-scrollbar-track {
background-color: #f1f1f1;
border-radius: 6px;
}
```
在上面的示例中，`.scroll-container`元素具有固定的寬度和高度，并設置了`overflow: scroll;`來顯示滾動條。`.content`元素的寬度和高度超過了`.scroll-container`元素的寬度和高度，從而觸發滾動條的顯示。
通過使用`::-webkit-scrollbar`、`::-webkit-scrollbar-thumb`和`::-webkit-scrollbar-track`選擇器，可以自定義滾動條的樣式。在示例中，我們設置了滾動條的寬度、顏色和邊框半徑。
請注意，上述示例中的CSS代碼適用于WebKit瀏覽器（例如Chrome、Safari），不同瀏覽器可能需要使用不同的前綴。
