sectionごとに画像を重ねたいが、2回目以降のposition: relative;は機能しない？？

前提・実現したいこと

sectionごとに、複数の画像を理想の位置で重ねたいです。

ある<section>(no1)で、画像(pic1)に「position: relative;」を使い、画像(pic2)に「absolute:」を使います。このsectionでは画像を理想の位置で重ねることができました。
次に、この<section>(no1)から出て、<section>(no2)で、また画像を重ねたいので、画像(pic3)に「position: relative;」を使い、画像(pic4)に「absolute」を使ったところ、pic4は親要素をpic3ではなく、ウィンドウ左上に認識してしまいます。

sectionごとに親要素を定め、画像を自由に配置したいのですが、そのようなことはできないのでしょうか？

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

２回目の「position: relative;」(<section class="no2">のrelative)が機能していない。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>practice1</title>
6    <link rel="stylesheet" href="stylsheet.css">
7
8  </head>
9  <body>
10    <section class="no1">
11      <div class="pic1">
12        <p>画像1</p>
13      </div>
14      <div class="pic2">
15        <p>画像２</p>
16      </div>
17    </section>
18
19    <section class="no2">
20      <div class="pic3">
21        <p>画像３</p>
22      </div>
23      <div class="pic4">
24        <p>画像４</p>
25      </div>
26    </section>
27  </body>
28</html>

css
1.no1{
2  width: 300px;
3  height: 100px;
4  background-color: red;
5}
6
7.pic1{
8  position: relative;
9  width: 200px;
10  height: 50px;
11  background-color: cornsilk;
12}
13.pic2{
14  position: absolute;
15  width: 100px;
16  left: 250px;
17  background-color: cyan;
18}
19
20.no2{
21  width: 500px;
22  height: 200px;
23  margin-top: 100px;
24  background-color: red;
25}
26.pic3{
27  position: relative;
28  width: 400px;
29  background-color: darkorange;
30}
31.pic4{
32  position: absolute;
33  top: 0px;
34  left: 50px;
35  width: 250px;
36  background-color: darkseagreen;
37}