親要素のposition:relative;を指定しても起点にならない

起点として親要素（box2）にポジションrelateveを指定し、子要素(img)にポジションabsoluteを指定しました。
しかし、画面の左上を起点としてしまい指定通りのデザインができません。

ポジションについて調べたところ、下記の認識をしています。

・直近のrelativeを起点とする
・relativeを指定する要素にはheigthを指定する

しかし、思うように表現できずお手上げ状態になってしまいました。

css,htmlにお詳しい方のご助言をいただきたいです。
どうぞ宜しくお願い申し上げます。

HTML
1 
2    <div class="box1">
3      <h2>テスト1</h2>
4
5      <p>こちらのボックス１には、画像を重ねない。シンプルな囲み枠のままにするこちらには、画像を重ねない。シンプルな囲み枠のままにするこちらには、画像を重ねない。シンプルな囲み枠のままにするこちらには、画像を重ねない。シンプルな囲み枠のままにするこちらには、画像を重ねない。シンプルな囲み枠のままにする。</p>
6
7     </div>
8
9    <div class="box2">
10      <h2>テスト2</h2>
11
12        <p>ボックス2に、ポジションを設定したい。ボックス2に、ポジションを設定したい。ボックス2に、ポジションを設定したい。ボックス2に、ポジションを設定したい。</p>
13
14       </div>
15
16
17      <img class="about_bird" src="images/about-bird.png" alt="aboutの画像">
18      <img class="about_leaf" src="images/about-leaf.png" alt="aboutの画像">
19
20

CSS
1
2.box1 {
3   box-sizing: border-box;
4   width: 100%;
5   height: 100%;
6   margin:20px auto;
7   padding:20px 60px 50px 60px;
8   border:5px double #333;
9}
10
11
12
13.box2 {
14   position: relative;
15    box-sizing: border-box;
16    width: 100%;
17    height: 100%;
18    margin:20px auto;
19    padding:20px 60px 50px 60px;
20    border:5px double #333;
21 }
22 
23 
24 /* ----- 画像１ ----- */
25 .about_bird {
26    position: absolute;
27    margin: auto;
28    width: 300px;
29    top: 5%;
30    left:70%
31 }
32 
33 /* ----- 画像２ ----- */
34 .about_leaf {
35    position: absolute;
36    margin: auto;
37    width: 200px;
38    top: 30%;
39 }
40