我的容器彼此重叠

Question

我使用bootstrap创建了以下内容：

以上代码是：

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

容器不应该像其他容器一样。我想要它（像积木一样）。我的尝试是改变定位，但只是保持重叠。我试过做一个margin-top，但这并不是一个不能让它重叠的解决方案。

Answer 1

你正是这样做的。你能否解释为什么在某些情况下你会使用绝对和浮动等属性？也许我们会找到更好的解决方案。

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