要控制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），不同浏览器可能需要使用不同的前缀。