CSS 可以通過設置元素的 position 屬性來設置元素與頂部的距離。當元素的 position 屬性設置為 fixed 或 absolute 時，就可以使用 top 屬性來設置元素與頂部的距離。 在 CSS 中，通過選擇器選中需要設置的元素，然后通過屬性選擇器設置元素的 position 屬性。接著，就可以使用 top 屬性設置元素與頂部的距離了，單位可以是像素、百分比或 em 等。 下面是一個例子：

p {
position: fixed;
top: 100px;
}

以上代碼選中了 p 元素，并將其 position 屬性設置為 fixed，表示該元素相對于視口固定位置。接著，將 top 屬性設置為 100px，表示該元素與頂部的距離為 100 像素。 如果元素的 position 屬性設置為 absolute，則該元素會相對于其最近的已定位祖先元素定位。也就是說，它的 top 屬性的值是相對于已定位祖先元素頂部的距離。

.parent {
position: relative;
}
.child {
position: absolute;
top: 50px;
}

以上代碼中，.parent 元素的 position 屬性設置為 relative，表示該元素相對于它自己原本的位置進行定位。接著，.child 元素的 position 屬性設置為 absolute，表示該元素相對于 .parent 元素進行定位。最后，將 .child 元素的 top 屬性設置為 50px，表示該元素與 .parent 元素頂部的距離為 50 像素。 需要注意的是，如果元素的 position 屬性沒有設置為 fixed、absolute 或 relative，它的 top 屬性是沒有任何效果的。 使用 CSS 設置元素與頂部的距離可以制作各種不同的頁面效果，例如固定式導航欄、懸浮式廣告條等。當然，也要注意合理使用，避免影響網頁的響應速度和用戶體驗。