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

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

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

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

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