top: 100% と bottom: 0 の指定の違いは何か気になったので確認しました。

position: absoluteの概要

position: absolute は position: relative; からの相対位置を決めるプロパティです。
位置はtop、bottom、left、rightが指定出来、各々の位置からどれくらいの距離にするかを指定出来ます。

指定の違い

0指定

0を指定すると、子要素は親要素内の隅に固定されます。
以下は、bottom: 0 の例です。

HTML

<div class="sample_01">bottom 0</div>

CSS

.sample_01{
  position: relative;
  height: 40px;
  width: 100px;
  background: #000000;
  padding: 5px;
  color: #fff;
}

.sample_01::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: red;
  /* 位置 */
  position: absolute;
  bottom: 0;
}

結果

bottom 0

100%指定

0を指定すると、親要素外に固定されます。
以下は、top: 100% の例です。

HTML

<div class="sample_02">top 100%</div>

CSS

.sample_02{
  position: relative;
  height: 50px;
  width: 100px;
  background: #000000;
  padding: 5px;
  color: #fff;
}

.sample_02::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: red;
  /* 位置 */
  position: absolute;
  top: 100%;
}

結果

top 100%

最後に

特にありません。