html - 「絶対」で配置されたテキストボックスは、ウィンドウのサイズ変更時にずれています

Question

以下のコードでメインフォームの外に作成したテキストボックスがあります。

 <div class = "Box">
  <form action="javascript:someThing()">
   <input type="text" id="RandomID" />
  </form>
  </div>

次に、次のCSSを使用して、上記のテキストボックスを配置しようとしました:

  div.Box
{
 position: absolute;
 bottom: 50%;
 right: 20%;
}

これが、テキストボックスを完全に配置するために必要な CSS であると確信しました。ただし、ウィンドウのサイズを変更またはズームすると、テキストボックスが遠くに移動し、残りのページ要素と一緒に配置されません。CSS のどこが間違っていますか?