CSS可以让滚动条不占位，这对于进行页面设计和排布时非常有用。下面我们来具体看一下如何做到。

/* 首先要重置默认的滚动条样式 */
body {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer and Edge */
}
/* 给滚动条添加自定义样式 */
body::-webkit-scrollbar {
width: 0.5em;
}
body::-webkit-scrollbar-thumb {
background-color: #666;
border-radius: 5px;
}
/* 让内容顶部与屏幕顶部对齐 */
body {
margin: 0;
padding: 0;
}
/* 给内容增加一个padding值，确保内容不会被遮挡住 */
body >* {
padding-right: 0.5em;
}

上面的代码中，我们首先使用了scrollbar-width: none;和-ms-overflow-style: none;来重置默认的滚动条样式。接着，我们使用了::-webkit-scrollbar和::-webkit-scrollbar-thumb来自定义滚动条的样式。最后，我们给内容增加了一个padding-right值，确保内容不会被滚动条遮挡住。

通过这样的设置，我们就可以让滚动条不占位了。非常简单方便，大家可以在页面设计时尝试一下。