position relativeとposition absoluteの指定の仕方について

Question

<section class="cook">と <section class="source_water">のそれぞれを親要素として、position relativeとして、それぞれの子要素にposition absoluteで位置を指定して文章と画像を挿入していますが、<section class="source_water">の子要素が <section class="cook">の要素の上に張り付いてきます。 親要素の指定の仕方が間違っているのでしょうか？

      　  <!-- 温海料理 -->

          <section class="cook">
            <img class="cook_img" src="img/menu-top.jpg" alt="" width="1050" height="545">
          
          <figure class="cook_paragraph">

            <h2>出迎え得るのは</h2>
            <h2>至極の温泉料理</h2>
            <p>最も旬の食材を愉しむ、最高の贅沢を</p>
            <p>最高級A5ランクの米沢牛と共に頂く。</p>
            <p>あなたの人生史に残る「極上の感動」を</p>
            <p>お約束します。</p>
            <span>料理について</span>
     
          </figure> 
     
        </section>

          <!-- 温泉について -->

          <section class="source_water">
          <img class="source_water_img" src="img/onsen-top.jpg" alt="" width="1050" height="545">

              <figure class="source_water_paragraph">

                <h1>疲れ切った身体にやすらぎを</h1>
                <h1>温海の源泉に癒やされて</h1>
                <p></p>
                <p>古くは弘法大師の病をも治療したと言われる熱海の泉質。</p>
                <p>現代人の疲弊しきった身体を修復する最高級の湯治場として<p>
                  <p></p>
                <p>ご活用ください。<p>   
                <span>温泉について</span>
             
              </figure>
                    
          </section>

/* cook */


.cook {
  position: relative;
  margin-top: 106px;
  background-color: violet;
  
}


.cook_img {
  position: absolute;
  left:1187px;
}

.cook_paragraph {

  position: absolute;
  /* display: inline-block; */
  top:138px;
  left:408px;
  background-color: red;

}


/* source_water  */


.source_water {
  position: relative;
  margin-top: 106px; 
  background-color: blue;
}

.source_water_img {
  position: absolute;
  left:50px;
}


.source_water_paragraph {
  position: absolute;
  display: inline-block;
  top:138px;
  left:408px;
  background-color: red;

} 

Answer 1

position:absoluteを使うと通常のレイアウトから除外されるので高さがなくなります。
なのでcookは空っぽで高さがありません
そこにsource_waterの要素が表示されます。

みたいな感じでしょうか。
高さを指定してみてください。

Comments

[tohma]

ご回答ありがとうございます。
回答時間もほぼ同じなので確信が持てませんが、先の回答いただいたようですので、ベストアンサーとさせていただきました。

Answer 2

最終的にどのようなレイアウトが希望なのか不明ですが、
各セクションの子要素が重なるのは、セクションに高さを指定していないので、セクションの高さが0になっている気が原因ですね。position: absoluteを設定した要素は浮いた状態になり、親要素からはないものとして扱われますので。
各セクションに適切な高さを設定すれば重ならないようになります。

Comments

[tohma]

同じ回答内容でしたのでベストアンサーとさせていただきたいところですが、前者の方に理由を述べさせていただいています。0
間違っていたら申し訳ありません。
ご回答ありがとうございます。