1つのページ内に position: relative; と position: absolute; を複数入れるが親要素と子要素の関係がうまくいかない

表題の件、
各ブロックごとに contents-1　/ contents-2 を親要素、
その中身の div を子要素として、position: relative; / position: absolute;を用いてページレイアウトをしたいのですが、

クラス名 contents-2 の子要素にしたいもの（クラス名：contents-2a、txt-2a、white の3つの要素）の、親が contents-1 になっているようです。

希望の形としては、

親：contents-1（relative）
子：contents-1a、txt-1a、contents-1b、txt-1b（absolute）
のブロックと

親：contents-2（relative）
子：contents-2a、txt-2a、white（absolute）
のブロックにしたいと思っているのですが、positionの理解が間違っているでしょうか…？

Googleで検索したところ、「親要素は直前のものになる」とあったので、
その理屈でいくとこの書き方であっているのかな？と思ったのですが、
どうしてもうまくいかず、こちらで質問させていただきました。

以下に該当部分のコードを記載します。
作業環境は、HTML5、ブラウザはchromeです。

HTML
1
2<!-- HISTORY -->
3<div class="wrapper">
4
5<div class="contents-1">
6
7  <div class="contents-1a" class="scroll-block fade-block1">
8  <img src="https://image.rakuten.co.jp/woody-h/cabinet/07398498/about-whf_01.jpg" alt="">
9  </div>
10  
11  <div class="txt-1a" class="scroll-block fade-block1">
12  <h2>HISTORY</h2>
13  <p class="txt">
14  京阪神エリアから、車で北へ約2時間。<br>
15  </p>
16  </div>
17  
18  <div class="contents-1b" class="scroll-block fade-block1">
19  <img src="https://image.rakuten.co.jp/woody-h/cabinet/07398498/about-whf_02.jpg" alt="" class="scroll-block fade-block1 sp-margin">
20  </div>
21  
22  <div class="txt-1b" class="scroll-block fade-block1">
23  <p class="txt">
24  今も本社を置く、発祥の地・舞鶴を<br>もっと元気にするために<br>
25  何か私たちにできることはないか…<br><br>
26  </div>
27
28</div>
29</div>
30
31
32<!-- MISSION -->
33<div class="wrapper">
34<div class="contents-2">
35
36  <div class="contents-2a">
37  <img src="https://image.rakuten.co.jp/woody-h/cabinet/07398498/about-whf_03.jpg" alt="" class="scroll-block fade-block1">
38  </div>
39  
40  <div class="white"></div>
41  <div class="txt-2a">
42  <h2>MISSION</h2>
43  <p class="txt">
44  ●地元から愛される会社、店舗として地方都市である舞鶴を盛り上げること<br><br>
45  </p>
46  </div>
47  
48</div>
49</div>

css
1.wrapper {
2 width:1200px;
3 }
4
5.txt {
6 letter-spacing: 0.2em;
7 line-height: 3em;
8 }
9
10.white {
11  width: 600px;
12  height: 600px;
13  position: absolute;
14  top: 20px;
15  left: 480px;
16  background: #fff;
17  z-index: 10;
18  }
19  
20.contents-1 , .contents-2 {
21 position: relative;
22 margin: 50px 0;
23 }
24
25.contents-1a  {
26 position: absolute;
27 right: 0;
28 margin: 100px 0;
29 }
30
31.contents-1b {
32 position: absolute;
33 left: 0;
34 top: 750px;
35 margin-bottom: 100px;
36 }
37 
38.txt-1a {
39 position: absolute;
40 text-align: right;
41 top: 0;
42 right: 30px;
43 }
44
45.txt-1b {
46 position: absolute;
47 text-align: left;
48 top: 800px;
49 left: 550px;
50 }
51
52.contents-2a {
53 position: absolute;
54 top: 0px;
55 left: 50px;
56 }
57
58.txt-2a {
59 position: absolute;
60 text-align: left;
61 top: 50px;
62 left: 530px;
63 z-index: 20;
64 }
65 
66