在 CSS 中，通過使用 top 屬性可以使元素距離其父元素的頂部位置發生變化。但是，該屬性的基準點到底是什么？這是需要注意的問題。 首先，我們需要了解的是，如果一個元素沒有設置 position 屬性值，則 top 屬性對其沒有任何作用。如果一個元素設置了 position 屬性為 static，也是如此。只有當 position 屬性設置為 relative、absolute 或 fixed 時，top 屬性才會生效。 對于 position 屬性為 relative 的元素，其基準點是它原本的位置。也就是說，如果我們將 top 屬性設置為 10px，則該元素將向下移動 10px。 但對于 position 屬性為 absolute 或 fixed 的元素，其基準點則是它最近的已定位的祖先元素的頂部位置。所謂已定位，指的是該元素設置了 position 屬性為 relative、absolute 或 fixed。如果沒有找到已定位的祖先元素，則其基準點為頁面的頂部。 請看下面的示例代碼：

相對位置
絕對位置

在上面的代碼中，第一個 div 元素設置了 position 屬性為 relative，并通過 top 屬性讓該元素下移了 10px。第二個 div 元素設置了 position 屬性為 absolute，并且也設置了 top 屬性。由于上一級的 div 元素已經設置了 position 屬性，所以該元素的基準點就是上一級 div 元素的頂部位置再向下移 10px。第三個 div 元素也設置了 position 屬性，但是它的上一級 div 元素的 position 屬性為 relative，所以該元素向下移的距離也是相對于上一級 div 元素的原始位置而言的。 總之，在使用 CSS 中的 top 屬性時，一定要注意該元素的 position 屬性值，以及它最近的已定位的祖先元素的位置。這樣才能確保樣式的正確性。