Bootstrap <div> overlay

Question

When I was 3 <div>, as part of Bootstrap’s basic skeleton, as I do so that the <div> referring to the main content is superimposed on those of the header and footer, hiding a small part of them?

I made a Fiddle simple with delimiter edges to make it easier to understand.

To <div> with the black border will be the main content, as demonstrated by the lorem ipsum in it.

The red border is the header that will have basically a large image that would not be at all necessary to display whole, hence the desire to hide a little bit with the <div> leading.

Finally, the blue edge is the baseboard. For now the idea is to do the same thing as with the header, but I’ll still see if I do even this or not and, so it would be interesting to solution to be like "plug n' play"

I researched for hours but I did not find that, I imagine to be super simple and when I found someone very close, conceptually speaking, I get in trouble with the Bootstrap Grid.

Answer 1

To do this, simply add a position: relative; to your div and then add a z-index: 1; to the one you want to override and z-index: 0; to the others. Behold:

    #header {
      height: 200px;
      background-color: #F00;
      position: relative;
      z-index: 0;
    }

    #content {
      background-color: #000;
      color: #FFF;
      border: 1px solid #000;
      margin-top: -100px;
      position: relative;
      z-index: 1;
    }

    #footer {
      background-color: #00F;
      margin-top: -100px;
      height: 400px;
      position: relative;
      z-index: 0;
    }

<div id="header">Header</div>

<div id="content" class="container">

    <div class="row row-centered">

        <div class="col-md-12">
        
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc congue convallis sem ac convallis. Suspendisse fermentum eget arcu a consectetur. Integer rhoncus non tellus ac bibendum. Vivamus quis gravida lectus. Phasellus sodales luctus lectus ac tincidunt. Curabitur a tortor in sem maximus venenatis. Phasellus eget mauris congue, mattis turpis eget, dapibus sapien. Vestibulum porttitor eleifend purus nec placerat. Aenean vulputate magna id enim tempor, eu semper sapien pulvinar.
</p>
<p>
Nunc molestie massa arcu, gravida rutrum diam dictum sit amet. Fusce vel gravida purus, ac finibus nunc. Aenean est purus, condimentum ornare enim et, auctor feugiat diam. Vestibulum hendrerit mauris et lectus luctus pellentesque in ac justo. Fusce porta lobortis felis faucibus rutrum. Aliquam dictum sem eget turpis consectetur, id congue ipsum varius. Curabitur sit amet faucibus lectus. Duis venenatis mi vitae feugiat gravida. Integer massa nibh, scelerisque eu mollis a, porta ut sapien. Quisque nec eleifend tellus. Proin ut congue massa. Nam posuere urna placerat tristique semper.
</p>
<p>
Aliquam sed molestie ante. Morbi bibendum ex id eros tempus, et iaculis dolor elementum. Curabitur scelerisque cursus odio eget efficitur. Vivamus nulla nunc, interdum quis mi a, aliquet interdum lacus. Nulla non molestie dolor, vitae vulputate urna. Nulla ut lacus augue. Duis vestibulum vehicula rhoncus. Integer quis suscipit lectus.
</p>
<p>
Sed eleifend elit sit amet est ullamcorper eleifend. Fusce sed libero justo. Maecenas vitae purus elementum, vestibulum nulla vitae, luctus elit. Maecenas at mauris blandit, bibendum risus at, blandit nibh. Sed dictum tincidunt eros ut tempor. Nulla sollicitudin diam quis lorem varius dictum. Duis nec ligula id diam viverra sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam blandit, lectus sed aliquam bibendum, dolor tellus condimentum elit, et ornare ipsum lorem eu libero.
</p>
<p>
Donec auctor egestas nunc. Aenean imperdiet iaculis leo, et sodales dolor. Mauris a ex sed lacus finibus mollis. Sed efficitur lacus vel velit scelerisque gravida. Duis molestie nibh eget dui maximus condimentum. Nunc mollis bibendum hendrerit. Aenean vitae est et nulla suscipit consectetur. Maecenas feugiat dignissim arcu vitae consectetur.
</p>
<p>
Suspendisse potenti. Etiam aliquam neque turpis, vel aliquam sapien ultrices in. Donec rhoncus diam nec dolor tempus mollis. Vestibulum semper ultrices lacus, ac consectetur erat imperdiet vitae. Phasellus auctor semper enim, eu malesuada massa scelerisque non. Vivamus sodales a nulla non congue. Nulla mollis risus in tempor tincidunt. Sed accumsan nulla ante, quis dapibus dolor aliquam vitae. Pellentesque eget posuere mauris, ac suscipit metus. Mauris sodales risus a orci fermentum aliquet. Pellentesque feugiat sed orci a tempor. Nullam luctus imperdiet velit, a tempus sapien rutrum et.
</p>
<p>
Sed luctus est vitae hendrerit bibendum. Aliquam erat volutpat. Aenean dictum lectus ac luctus porta. Nulla purus tortor, sollicitudin vel euismod vel, tincidunt imperdiet quam. In aliquet malesuada blandit. Ut ut dolor dapibus ex eleifend laoreet eu eget sem. Vivamus ornare magna eu lorem rutrum ullamcorper. Nullam et justo vel neque mattis pharetra. Phasellus in sapien tortor. Proin suscipit suscipit libero, sit amet varius ligula vehicula in. Quisque orci odio, molestie eu blandit sagittis, bibendum ut mauris. Phasellus nunc nibh, suscipit ut erat ut, auctor fermentum nunc. Morbi sit amet malesuada mauris, a pretium velit. Phasellus eu arcu ultrices, suscipit felis lacinia, commodo augue.
</p>
</div>

      </div>

    </div>

<div id="footer">Footer</div>