css top定位百分比

CSS中的top属性用于控制元素的垂直位置。设置该属性时可以使用像素（px）、百分比（%）以及其他单位来指定距离。其中，使用百分比作为top值时会在不同的屏幕尺寸下产生不同的效果。

.example {
  position: absolute;
  top: 50%;
}

css top定位百分比

在上面的代码中，我们设置了一个元素的top值为50%。这意味着元素顶部的位置将与其父元素顶部的距离相等，且元素的中心点将会与其父元素中心点对齐。

然而，需要注意的是，使用百分比作为top值时，该值会相对于其父元素的height属性而言。因此，当父元素高度变化时，元素的top值也会相应地随之变化。

.parent {
  height: 100px;
  position: relative;
}
.example {
  position: absolute;
  top: 50%;
}

在这个例子中，我们设置了一个高度为100px的父元素，并将其设置为相对定位。接着，我们在该元素中添加了一个子元素，并将其top值设置为50%。因为这个子元素的top值相对与父元素的height属性而言，所以当我们修改父元素的高度时，子元素的位置也会相应地随之改变。

通过使用百分比作为top值，我们可以创建出各种各样的样式效果。例如，如果我们想将一个元素垂直居中，我们可以将其top值设置为50%，然后再使用transform属性将其上移一半的高度。

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

通过使用以上代码，我们可以将元素相对于其父元素垂直居中。同时，因为使用了百分比作为top值，所以我们可以确保该元素在不同的设备屏幕上也能正常居中。