1

Tendo eu 3 <div>, como parte do esqueleto básico do Bootstrap, como eu faço para que a <div> referente ao conteúdo principal fique sobreposta àquelas do cabeçalho e do rodapé, escondendo uma pequena parte delas?

Fiz um Fiddle simples com umas bordas delimitadoras pra ficar mais fácil de entender.

A <div> com a borda preta será o conteúdo principal, como demonstra o lorem ipsum nela.

A de borda vermelha é o cabeçalho que vai ter basicamente uma imagem grande que não seria de todo necessária exibir inteira, daí a vontade de esconder um pedacinho com a <div> principal.

Por fim, a de borda azul é o rodapé. Por enquanto a idéia é fazer a mesma coisa que com o cabeçalho, mas ainda vou ver se faço mesmo isso ou não e, por isso, seria interessante a solução ser tipo "plug n' play"

Pesquisei por horas mas não encontrei isso que, imagino ser super simples e quando encontrava alguém bem próximo, conceitualmente falando, encrencava com o Grid do Bootstrap.

5
  • pt.stackoverflow.com/q/151547/45854 Help Commented 7/09/2016 às 15:14
  • desculpe não entendi nada do que você precisa. Commented 7/09/2016 às 17:41
  • Utilizando as margens negativas, você já está sobrepondo, qual a dúvida ?
    – MagicHat
    Commented 7/09/2016 às 17:56
  • @MagicHat Oh my... Eu achava que pelo fato de eu estar vendo a borda vermelha não estava sobrepondo. Troquei as bordas por background-color pra testar e ficou certinho... quanto ao header. Já o footer continuou por cima do conteúdo principal (preto). Eu poderia dar um clear no #footer, mas isso faria ele cair, e não ficar atrás;
    – user40802
    Commented 7/09/2016 às 19:53
  • Explica a ordem que realmente deseja.que fica por cima e quem fica por baixo...
    – MagicHat
    Commented 7/09/2016 às 20:03

1 Resposta 1

0

Para fazer isso, basta que você adicione um position: relative; a suas div e depois adicione um z-index: 1; para a que deseja sobrepor e z-index: 0; para as outras. Veja:

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

3
  • Visualmente, perfeito. Mas esses position: relative não vão interferir com o Grid do Bootstrap? Porque, por exemplo, dentro dessa DIV preta, irão outras elementos parte do Grid para compor o restante do visual (sidebar, body...)
    – user40802
    Commented 8/09/2016 às 12:01
  • Não se preocupe. O "position: relative;" não afetara o css do seu bootstrap. Mas a sua div content deveria estar dentro do body e não o contrário.
    – alan
    Commented 8/09/2016 às 13:39
  • Não que fosse assim tão necessário, mas já que eu estava meio de bobeira eu montei um Fiddle atualizado com a solução acima pra ficar mais fácil de visualizar do que no editor in-place daqui. De quebra ainda fiz o rodapé estender sua altura indefinidamente pro background do <body> não aparecer depois dele.
    – user40802
    Commented 17/01/2017 às 12:24

Você deve fazer log-in para responder a esta pergunta.