Div overlay with Bootstrap

Question

Div overlay with Bootstrap

Navigation

#1 by (0 votes)

1

Having 3 <div> , as part of the basic Bootstrap skeleton, how do I make the <div> of the main content overlap with those of the header and footer, hiding a small part of them?

I made a simple Fiddle with bounding borders to make it easier to understand.

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

The red border is the header that will basically have a large image that would not at all be required to display entire, hence the urge to hide a little bit with <div> main.

Finally, the blue border is the footer. For now the idea is to do the same thing with the header, but I will still see if I do this or not and therefore it would be interesting to be a plug n 'play solution

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

css bootstrap

asked by anonymous 07.09.2016 / 16:15

1 answer

Consult user in SQLite [closed] Create new user in the database via Rails C

score 0 · Accepted Answer

To do this, simply add a position: relative; to your div and then add a z-index: 1; for which you want to overlap and z-index: 0; for the others. See:

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