CSS元素top屬性在網頁設計中經常用來控制元素的位置，特別適合用于將某個元素垂直居中于父元素的中間位置。下面我們來談一下如何使用top屬性來讓元素適應div。

div{
position: relative;
width: 300px;
height: 300px;
background-color: #f5f5f5;
}
p{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 200px;
background-color: #f9c6d5;
padding: 10px;
}

在上面的代碼中，我們首先設置了一個類名為div的div元素，它的寬度和高度都是300px，并且有一個淺灰色的背景。緊接著，我們定義了一個類名為p的p元素，并將它的position屬性設置為absolute，使得它脫離文檔流、可以自由定位。同時，我們將它的top屬性設置為50%，這會讓它距離div頂部的距離為div高度的一半。但是，這樣還不夠，因為p元素的高度是未知的，所以我們需要通過添加transform: translateY(-50%)來將p元素向上移動一半的高度，從而垂直居中。

需要注意的是，若父元素的position屬性不是relative則top屬性將無法作用。此外，也可以利用margin-top等屬性達到相同的效果，具體根據需要自行選擇。