Como fazer div sobreposta com bootstrap?
div sobreposta bootstrap
Veja como usar o position no bootstrap para criar esse efeito.
Veja o exemplo abaixo:
Nele foi usado:
<div class="position-relative bg-danger">
DIV PAI
<div class="position-absolute fixed-top bg-warning col-6 offset-3">
div filho
</div>
</div>
Explicação:
Como podem ver no exemplo foram utilizadas apenas classes do bootstrap sem CSS adicional.
No elemento pai é definido o position como relative para a div se adaptar aos elementos superiores da página.
No elemento filho é usado o position absolute para ele ficar fixado de acordo com o elemento pai.
Junto com ele é usado o fixed-top para ficar em uma posição no inicio do elemento pai na parte superior, assim sobrepondo as div's.
Para diferenciar os elementos foi usado bg com danger para o elemento pai e warning para o filho.
Para usar a sobreposição e deixar o elemento pai visível foi usado grid do bootstrap com col-6 para ter a metade do tamanho e offset-3 para se deslocar algumas posição e ficar centralizada.
Veja mais em:
Como usar position no bootstrap?
Como usar o sistema de grids do bootstrap?
Para que serve a classe bg do bootstrap?
Quais os padrões de cores do bootstrap?
Como sobrepor uma div com CSS?
