javascript - 绝对位置时div高度为0

Question

不知道为什么2号线在1号线之上

我想在第 1 行之后添加第 2 行。我不想删除绝对位置，因为这与某些不同的网页有关。

Codepen Link of that Web page

 console.log('a', document.getElementById('a').getBoundingClientRect().height);
 console.log('b', document.getElementById('b').getBoundingClientRect().height);
 console.log('c', document.getElementById('c').getBoundingClientRect().height);

#a{
  position:realative;
  background:#ef0000;
}
#b{
  position:absolute;
}
#c{
  
}

<div id="a">
  <div id="b">
    <h2>Line 1 :</h2>
  </div>
  <div id="c">
    <h2>Line 2 :</h2>
  </div>
</div>

Answer 1

     <div id="a">
          <div id="b">
            <h2>Line 1 :</h2>
            <div id="c">
            <h2>Line 2 :</h2>
          </div>
          </div>

        </div>

    place div c inside b.

    Make id  'b' as ancestor to 'c'.so,since 'b'  is positioned absolute its child will be  positioned relative to 'b'. 

LINE1
LINE2