将div与其他两个元素重叠

Question

I'm trying to lay a div's content partly over a header element and a section element, but I need some help with the structure/styling.

Visually, I've almost achieved what I want with absolute / relative positioning, but it feels hacky because I'm using a negative top value. The other issue is that as I bring up the div's content with a negative top , its parent's height remains the same, creating unwanted space below the div content.

I also tried just giving #about .row a negative margin-top , which didn't cause the unwanted space issue, but due to the structure, the div's content appeared underneath the header.

I'm sure there's a better way to approach this, so I'm hoping someone here can help me out! Thanks in advance!

Current markup:

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

I also threw together a quick Fiddle to replicate the sections in questions: https://jsfiddle.net/jcmo4hua/ .

Answer 1

Instead of using position:relative; and negative top , use negative margin-top .

fiddle

Answer 2

You should use margin-top:-120px on the .container element, which is a parent of the element you are giving top:-120px at the moment.

This way you will retain expected effect and clean markup.