html - 将 div 重叠在其他两个元素上

Question

我正在尝试将一个 div 的内容部分地放置在一个标题元素和一个部分元素上，但我需要一些关于结构/样式的帮助。

在视觉上，我几乎用absolute/relative 定位实现了我想要的效果，但感觉很糟糕，因为我使用的是负top值。另一个问题是，当我用负 top 调出 div 的内容时，其父级的高度保持不变，从而在 div 内容下方创建不需要的空间。

我也试过只给 #about .row 一个负的 margin-top，这并没有导致不需要的空间问题，但是由于结构的原因，div 的内容出现在标题下方。

我确信有更好的方法来解决这个问题，所以我希望这里有人能帮助我!提前致谢!

当前标记:

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

我还拼凑了一个快速的 fiddle 来复制问题中的部分:https://jsfiddle.net/jcmo4hua/ .

Answer 1

不要使用 position:relative; 和负数 top，而是使用负数 margin-top。

fiddle