在CSS中，top屬性用于設(shè)置一個(gè)元素相對(duì)于其包含塊的頂部位置。

如下代碼示例中，我們將一個(gè)方框的top屬性設(shè)置為100像素，即該方框的頂部將會(huì)距離其包含塊（該例子中為body元素）的頂部100像素：

.box {
position: relative;
top: 100px;
}

當(dāng)設(shè)置top屬性時(shí)，元素必須同時(shí)擁有position屬性，否則top設(shè)置將無(wú)效。另外，需要注意top屬性的值可以是負(fù)值，這意味著元素的頂部會(huì)超出其包含塊的頂部。

下面是一個(gè)更完整的示例，其中我們將兩個(gè)元素相對(duì)于其包含塊進(jìn)行定位。請(qǐng)注意，"box1"元素的top屬性被設(shè)置為50像素，而"box2"元素的top屬性被設(shè)置為相對(duì)于"box1"元素的底部100像素：

.box1 {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
position: absolute;
top: calc(100% + 100px);
left: 50px;
width: 100px;
height: 100px;
background-color: blue;
}

在該示例中，我們使用了CSS3中的calc()函數(shù)來(lái)計(jì)算"box2"元素的top值。該函數(shù)可以讓我們?cè)跇邮奖碇羞M(jìn)行簡(jiǎn)單的計(jì)算，使代碼更加簡(jiǎn)潔和高效。