margin込み子要素を親要素の内部に配置する方法

Question

前提・実現したいこと

親要素(div)の中にmargin付きの子要素を配置した場合、横方向(左側)のmarginは親要素内部に入るが、縦方向(上側)のmarginは親要素の外にはみ出してしまいます。どのような要因でこうなるのでしょうか？
また、親要素にposition: absolute;を入れると上記の問題が解消されるのですが、正しい解決方法で合っているのでしょうか？

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<div class="test1">
 <div class="test2"></div>
</div>

該当のソースコード

.test1 {
  width: 300px;
  height: 300px;
  background: blue;
  position: absolute;
}

.test2 {
  width: 100px;
  height: 100px;
  background: green;
  margin: 50px;
}

試したこと

親要素にposition: absolute;を入れる

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

このサイトが参考になるかと思います
子要素に効かせたmarginが親要素に影響してしまう問題

.test1 {
  width: 300px;
  height: 300px;
  background: blue;
  overflow:hidden;  /* 追加 */
}

.test2 {
  width: 100px;
  height: 100px;
  background: green;
  margin: 50px;
}