我的容器保持彼此重叠

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