0

Como deixo a div #inner-block em primeiro plano?

#block-1
{
  position: absolute;
  width: 200px;
  height: 200px;
  top: 10px;
  left: 10px;
  background-color: #999;
  z-index: 1;
}
#inner-block
{
  position: relative;
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color: #777;
  z-index: 100;
}
#block-2
{
  position: absolute;
  width: 200px;
  height: 200px;
  top: 60px;
  left: 60px;
  background-color: #666;
  z-index: 2;
}
<div id="block-1"><div id="inner-block"></div></div>
<div id="block-2"></div>

6
  • Coloque #block-1 com z-index maior que o #block-2, ou seja, de 3 ou mais.
    – Sam
    7/11/2018 às 6:50
  • z-index so funciona com elementos com position absolute ou fixed 7/11/2018 às 10:14
  • Parece-me que a estrutura html utilizada não é a ideal para o efeito que pretende obter. Porque motivo a div block-2 ficaria a meio das outras duas, apesar de ser um elemento que não se relaciona com elas no html ? Parece ser um problema estrutural
    – Isac
    7/11/2018 às 10:33
  • Concordo com o @Isac , Como vc quer que o filho de um elemento se sobreponha a um elemento que é irmão do pai. Isso não é possível... No seu caso acredito que vc deveria colocar a div id="inner-block" dentro de div id="block-2". Veja que a hierarquia do z-index do filho id="inner-block" é referente ao próprio pai, e não ao irmão do pai!
    – hugocsl
    7/11/2018 às 10:41
  • Sam preciso que o #block-3 fique na frente do block-1 e antes do block-2
    – Mano World
    7/11/2018 às 11:22

1 Resposta 1

2

Apesar de e estrutura html não ser a ideal. Ainda é possivel chegar ao resultado esperado! Mas primeiro temos que entender porque não funciona... Vamos la!

Primeiro temos que entender que o z-index:

E o mais importante para enteder porque não funciona no seu caso

  • Não é herdado

Isso significa que quando você atribuiu o z-index ao 1 ao elemento #block-1 ele faz com que seus filhos não recebam o mesmo.

Para funcionar usando z-index bastaria remove-lo do elemento #block-1

#block-1
{
  position: absolute;
  width: 200px;
  height: 200px;
  top: 10px;
  left: 10px;
  background-color: #999;
}
#inner-block
{
  position: relative;
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color: #777;
  z-index: 100;
}
#block-2
{
  position: absolute;
  width: 200px;
  height: 200px;
  top: 60px;
  left: 60px;
  background-color: #666;
  z-index: 2;
}
<div id="block-1"><div id="inner-block"></div></div>
<div id="block-2"></div>

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .