Meine Behälter halten einander überlappende

Question

ich die mit Bootstrap folgenden erstellt:

Die für den obigen Code ist dies:

<div class="jumbotron cta-header"> 
    <div class="container cta-intro-box"> 
     <h1 class="cta-heading-text">testing testing testing </h1> 
    </div> 
</div> 


.cta-header { 
z-index: 3; 
position: relative; 
background-size: cover; 
height: 100vh; 
padding: 160px 0; 
top: 0; 
left: 0; 
width: 100%; 
float: left; 
} 

Es soll ein Abschnitt unter diesem Bildschirm sein . Aber es scheint, überlappend zu sein, wie hier zu sehen:

Der Code für den „Abschnitt“, die angeblich nicht zu überlappen ist die folgende:

<div class="container"> 
<div class="row"> 
<h2 class="cta-container-header">services</h2> 
    <div class="col-lg-4 cta-align"> 
     <h2 class="cta-service-text">Front-End web development</h2> 
     <p class="cta-service-p">test paragraph</p> 
    </div><!-- /.col-lg-4 --> 
    <!-- /.col-lg-4 --> 
    <!-- /.col-lg-4 --> 
    </div> 
</div> 


.container { 
position: absolute; 
width: 1170px; 
} 

Der Behälter ist nicht sollte so unter dem anderen Container sein. Ich möchte es unter (wie Bausteine) haben. Mein Versuch war, die Positionierung zu ändern, aber nur überlappend. Ich habe versucht, Margin-Top zu machen, aber das ist nicht wirklich eine Lösung, um es nicht überlappen zu lassen.

Answer 1

Sie machen es so zu sein. Können Sie bitte erklären, warum Sie Eigenschaften wie absolut und float in einigen Fällen verwendet haben? Vielleicht finden wir dafür eine bessere Lösung.

Working fiddle

<div class="jumbotron cta-header"> 
    <div class="container cta-intro-box"> 
     <h1 class="cta-heading-text">testing testing testing </h1> 
    </div> 
</div> 

<div class="container"> 
<div class="row"> 
<h2 class="cta-container-header">services</h2> 
    <div class="col-lg-4 cta-align"> 
     <h2 class="cta-service-text">Front-End web development</h2> 
     <p class="cta-service-p">test paragraph</p> 
    </div><!-- /.col-lg-4 --> 
    <!-- /.col-lg-4 --> 
    <!-- /.col-lg-4 --> 
    </div> 
</div> 

.container { 
width: 1170px; 
} 

.cta-header { 
background-size: cover; 
height: 100vh; 
padding: 160px 0; 
}