css top 百分比 相对

CSS中的top属性设置元素顶部边缘相对于其容器的位置。而百分比单位可以让我们对top属性进行更加灵活的控制，让元素距离容器顶部的距离适应不同屏幕尺寸或视口大小的变化。

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

上面的代码将元素相对于其容器顶部位置垂直居中。使用了50%的top属性值，这意味着元素顶部边缘将距离容器顶端的距离等于容器高度的一半。接下来使用了CSS 3的transform属性，并结合translateY函数将元素的位置垂直偏移量设置为其本身高度的一半，从而实现垂直居中。

此外，我们还可以使用百分比单位设定元素距离容器顶部的偏移量。例如，我们可以将top属性值设定为10%，这意味着元素的顶部边缘距容器顶部的距离将等于容器高度的10%。

{
    position: relative;
    top: 10%;
}

上面的代码将元素在其容器内以相对位置定位，并将其距离容器顶部的距离设定为10%。无论容器的高度如何变化，元素的距离都将适应容器的比例。这使得我们可以使用百分比单位轻松创建自适应的布局，使元素在不同设备或视口上显示效果更佳。