这是因为 top 值将顶部边缘作为参考点，因此需要使用 transform:translateY(-100％)将底边作为参考点.

That is because top value takes the top edge as a reference point, you need to use transform: translateY(-100%) to make the bottom edge a reference point.

.top {
  position: fixed;
  top: 100%;
}
.bottom {
  position: fixed;
  top: 100%;
  transform: translateY(-100%);
}

<div class="top" style="padding:20px;border:1px solid #000;">TOP: 100%;</div>

<div class="bottom" style="padding:20px;border:1px solid #000;">BOTTOM: 0;</div>