Überlappendes div über zwei andere Elemente

Question

Ich versuche, den Inhalt eines div teilweise über ein Header-Element und ein Abschnittselement zu legen, aber ich brauche etwas Hilfe bei der Struktur/Gestaltung.

Optisch habe ich fast erreicht, was ich will mit absolute/relative Positionierung, aber es fühlt sich hacky, weil ich einen negativen top Wert verwende. Das andere Problem ist, dass, wenn ich den Inhalt des DIV mit einem negativen top aufrufe, die Höhe seines Elternteils gleich bleibt, wodurch unerwünschter Platz unterhalb des DIV-Inhalts entsteht.

Ich versuchte, geben auch nur #about .row eine negative margin-top, die nicht den unerwünschten Raum Problem verursachen, aber aufgrund der Struktur, den Inhalt erschien die div unter der Header.

Ich bin mir sicher, es gibt eine bessere Möglichkeit, dies zu erreichen, also hoffe ich, dass jemand hier mir helfen kann! Danke im Voraus!

Aktuelle Markup:

<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;} 

Ich warf zusammen auch einen schnellen Fiddle die Abschnitte in Fragen zu replizieren: https://jsfiddle.net/jcmo4hua/.

Answer 1

Sie sollten margin-top:-120px auf dem .container-Element verwenden, das ein Elternteil des Elements ist, das Sie im Moment top:-120px geben.

Auf diese Weise behalten Sie den erwarteten Effekt und sauberes Markup.

Answer 2

Statt position:relative; und negative top verwenden Sie negative margin-top.

fiddle