0

Tenho este código bem simples, a minha div#d4 está saindo para fora de seu contêiner e caindo dentro da div#d2 isso porque as div filhas não cabem na div pai. E ao definir uma position: absolute para ela. Ela volta a aparecer, mas porque neste caso o z-index não funciona ?

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        #d1, #d2, #d3, #d0, #d4 {
            width: 200px;
            height: 200px;
            color: white;
        }

        #d0 {
            background-color: aqua;
        }

        #d1 {
            background-color: tomato;
        }

        #d2 {
            background-color: green;
        }

        #d3 {
            background-color: blue;
        }

        #d4 {
            background-color: yellow;
            z-index: 1;
        }

    </style>
</head>
<body>

<div id="d1">
    content1
    <div id="d0">
        content0
    </div>
    <div id="d4">
        content4
    </div>
</div>

<div id="d2">
    content2
</div>

<div id="d3">
    content2
</div>

</body>
</html>

3 Respostas 3

3

A propriededade z-index só funciona em elementos onde a propriedade position está presente e com um dos seguintes valores:

  • position: absolute
  • position: relative
  • position: fixed
  • position: sticky

No seu código deve ser:

#d1, #d2, #d3, #d0, #d4 {
    width: 200px;
    height: 200px;
    color: white;
    position: relative; /* Propriedade position aqui */
}

2

Na verdade as coisas estão ligadas ao tipo de container ou escopo do elemento. Se o elemento estiver dentro de um container flex, ou container grid, vc não precisa declarar o position para o z-index funcionar. Mas isso pode depender do que vc pretende com o layout final... e talvez vc nem preciso do position

Código em um Container GRID

#d1, #d2, #d3, #d0, #d4 {
    width: 200px;
    height: 200px;
    color: white;
}

#d0 {
    background-color: aqua;
}

#d1 {
    background-color: tomato;

    /* container GRID */
    display: grid;
}

#d2 {
    background-color: green;
}

#d3 {
    background-color: blue;
}

#d4 {
    background-color: yellow;
    z-index: 1;
}
<div id="d1">
    content1
    <div id="d0">
        content0
    </div>
    <div id="d4">
        content4
    </div>
</div>

<div id="d2">
    content2
</div>

<div id="d3">
    content2
</div>


Agora em um Container Flex

#d1, #d2, #d3, #d0, #d4 {
    width: 200px;
    height: 200px;
    color: white;
}

#d0 {
    background-color: aqua;
}

#d1 {
    background-color: tomato;

    display: flex;
    flex-wrap: wrap;
}

#d2 {
    background-color: green;
}

#d3 {
    background-color: blue;
}

#d4 {
    background-color: yellow;
    z-index: 1;
}
<div id="d1">
    content1
    <div id="d0">
        content0
    </div>
    <div id="d4">
        content4
    </div>
</div>

<div id="d2">
    content2
</div>

<div id="d3">
    content2
</div>

-1

Para qualquer sobre posição deve se colocar o tipo de posição ou seja para que z-index funcione corretamente coloque um position: como relative, fixed ou nesmo absolute.

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 .