Question

我试图将div的内容部分放在header元素和section元素上，但我需要一些结构/样式的帮助。

在视觉上，我几乎已经通过absolute / relative定位达到了我想要的效果，但是因为我使用的是负top值，所以感觉很糟糕。另一个问题是，当我用div 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;}

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

Answer 1

请使用否定position:relative;，而不是使用top和否定margin-top。

fiddle

Answer 2

您应该在.container元素上使用margin-top:-120px，该元素是您目前提供的元素top:-120px的父元素。

这样您将保留预期效果并清理标记。

在另外两个元素上重叠div

2 个答案: