Mario Parra Mario Parra - 5 months ago 6x
HTML Question

Overlapping div over two other elements

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

positioning, but it feels hacky because I'm using a negative
value. The other issue is that as I bring up the div's content with a negative
, its parent's height remains the same, creating unwanted space below the div content.

I also tried just giving
#about .row
a negative
, 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>

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


* {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:


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.