我的容器保持彼此重疊

Question

我創建自舉以下：

對於上面的代碼是這樣的：

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

有被認爲是該屏幕下的截面。但是，這似乎是重疊的，因爲在這裏看到：

對於不應該被重複的「部分」的代碼如下：

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

的容器不應該是在這樣的其他容器下。我希望它在下面（比如積木）。我的嘗試是改變定位，但只保持重疊。我嘗試做邊緣頂部，但這不是一個真正的解決方案，不要讓它重疊。

Answer 1

你是這樣做的。你能解釋一下爲什麼你在某些情況下使用絕對和float等屬性？也許我們會爲此找到更好的解決方案。

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