css top百分号

CSS中的top属性可以用来设置一个元素距离其相对定位的父元素顶部的距离。而这个距离可以用像素（px）或者百分比（%）来进行设置。下面主要介绍一下使用百分比来设置top属性的用法。

.parent{
    position: relative;
    height: 300px;
}

.child{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

在上面的示例中，.parent元素被设置为相对定位，.child元素被设置为绝对定位，并且top属性被设置为50%。这个50%是指.child元素距离.parent元素顶部的距离等于.parent元素高度的50%。

需要注意的是，使用百分比设置top属性时需要保证其相对定位的父元素也要有一个有效的高度值，否则设置百分比值是无效的。此外，还需要注意的是，当在使用top属性时，需要通过使用负的margin值或者translate属性来使得元素垂直居中，这是因为top属性是基于元素上边界的，而垂直居中通常是基于元素中心的。