CSS中的top
屬性是用來設置元素與其父容器頂部的偏移量。這個偏移量可以用像素(px)、百分比(%)、em和rem等單位來表示。當使用百分比時,它相對于其父容器的高度而不是寬度進行計算。
在一個使用了position
屬性的元素中,我們可以使用top
屬性來設置其相對于父容器頂部的位置。例如,下面的代碼將把元素移動到其父元素頂部的83%處:
.parent { position: relative; height: 500px; } .child { position: absolute; top: 83%; }
在上面的代碼中,.parent
是.child
的父元素,我們為其設置了一個高度為500像素的相對定位。接著,我們將.child
的定位屬性設置為絕對定位,并使用top
屬性將其置于父元素的83%處。由于百分比的值是相對于其父元素高度計算的,因此.child
元素將被設置在父元素的高度的83%處。
注意,在使用top
屬性時,需要將其作用的元素的position
屬性設置為relative
或者absolute
,否則無法生效。而且,當top
的值大于容器的高度時,元素將不可見,并且被截斷。