Usando Bootstrap, veja como colocar uma div para aparecer em cima de todas as outras, de forma sobreposta às demais em sua página HTML.
Se você deseja criar uma div sobrepondo todas as demais e no centro da página usando Bootstrap, pode usar a classe position-absolute junto com a classe fixed-top para garantir que a div permaneça no centro, independentemente da rolagem da página.
Podemos também usar a classe text-center do Bootstrap para centralizar o conteúdo dentro da div.
Veja essa div como exemplo,
<div class="alert alert-danger alert-dismissible fade show m-5 position-absolute" id="resultado" style="display: none; z-index: 1000;">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Alerta!</strong> Isso é um alerta animado com cor primária.
</div>
Nesse momento, ignore todo o restante das opções dentro da div e foque apenas em position-absolute e z-index: 1000. Apenas esses dois elementos são suficientes para você ter uma div sobrepondo todas as demais.
Agora, se você deseja ajustar a posição da div, poderá acrescentar dentro de class=”…” os seguintes itens:
- top-50 e start-50 que correspondem ao ponto médio superior e à extremidade esquerda
- translate-middle que é usada para centralizar vertical e horizontalmente a
div.
Veja mais posts sobre HTML e Bootstrap clicando nesses links.