重疊其他兩個元素的div

我想將div的內容部分地放在頭元素和節元素上，但我需要一些結構/樣式的幫助。重疊其他兩個元素的div

從視覺上來說，我幾乎可以通過absolute/relative的定位達到我想要的效果，但是由於我使用的是負值top，所以感覺很不方便。另一個問題是，當我調出div的內容爲負top時，其父母的身高保持不變，從而在div內容下創建不需要的空間。

我也試過只給#about .row負margin-top，這並沒有引起不必要的空間的問題，但由於結構，div的內容出現下頭。

我敢肯定有更好的方法來解決這個問題，所以我希望有人能幫助我！提前致謝！

當前的標記：

<header class="bg-primary" id="header"> 
    <div class="container"> 
     <div class="col-lg-10 col-lg-offset-1 text-center"> 
      <h2 class="section-heading">Header</h2> 
     </div> 
    </div> 
</header> 

<section class="bg-primary" id="about"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-10 col-lg-offset-1 text-center"> 
       <h2 class="section-heading">About</h2> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> 
      </div> 
     </div> 
    </div> 
</section>

CSS：

* {box-sizing: border-box;} 
body {margin: 0 auto; text-align: center; font: 24px/34px Arial, sans-serif;} 
header {background-color: #eaeaea; padding: 100px;} 
section {background-color: #337ab7; margin: 0 auto; padding: 50px; width: 100%;} 

section#about {position: absolute;} 
#about .container {position: relative;} 
#about .row {position: relative; top: -120px; background-color: #fff; color: #333; margin: 0 auto; padding: 50px; max-width: 1170px;}

我也扔一起快速小提琴複製部分的問題：https://jsfiddle.net/jcmo4hua/。

來源

2016-04-24 Mario Parra