CSSのposition:relativeを学習しているのですが、下記コードで「left%だけが効いて、top%が効かない」のはなぜでしょうか？
・ちなみに、topをpx指定へ変更すると効きます
※具体的に何をやりたいのか、というのはなく、単に疑問に思ったので質問しました

div {
  width: 200px;
  height: 200px;
}
#t1 {
  background-color: gray;
}
#t2 {
  position: relative;
  top: 50%;
  left: 50%;
  background-color: orange;
}
<body>
  <div id="t1"></div>
  <div id="t2"></div>
</body>