Por que o z-index não funciona?

Então, se eu entendi z-indexdireito, seria perfeito nessa situação:

Quero colocar a imagem inferior (a etiqueta / cartão) abaixo da div acima dela. Então você não pode ver as arestas afiadas. Como eu faço isso?

z-index:-1 // on the image tag/card

ou

z-index:100 // on the div above

também não funciona. Nem uma combinação de algo assim. Por quê?

A z-indexpropriedade só funciona em elementos com um positionvalor diferente de static(por exemplo position: absolute;, position: relative;ou position: fixed).

Também position: sticky;há suporte para o Firefox, prefixo no Safari, trabalhou por um tempo em versões mais antigas do Chrome sob um sinalizador personalizado e está sendo considerado pela Microsoft para ser adicionado ao navegador Edge.

Importante
Para o posicionamento regular, inclua position: relativenos elementos em que você também define z-index. Caso contrário, não terá efeito.

Se você definir a posição com outro valor, staticmas o elemento z-indexainda não parecer funcionar, pode ser que algum elemento pai tenha sido z-indexdefinido.

Os contextos de empilhamento têm hierarquia e cada contexto de empilhamento é considerado na ordem de empilhamento do contexto de empilhamento do pai.

Então, com o seguinte html

div { border: 2px solid #000; width: 100px; height: 30px; margin: 10px; position: relative; background-color: #FFF; }
#el3 { background-color: #F0F; width: 100px; height: 60px; top: -50px; }

<div id="el1" style="z-index: 5"></div>
<div id="el2" style="z-index: 3">
  <div id="el3" style="z-index: 8"></div>
</div>

Não importa quão grande a z-indexde el3será definido, será sempre sob el1porque os pais tem menor contexto de empilhamento. Você pode imaginar a ordem de empilhamento como níveis em que a ordem de empilhamento el3é, na verdade, 3,8, que é menor que 5 .

Se você deseja verificar os contextos de empilhamento dos elementos pai, pode usar isto:

var el = document.getElementById("#yourElement"); // or use $0 in chrome;
do {
    var styles = window.getComputedStyle(el);
    console.log(styles.zIndex, el);
} while(el.parentElement && (el = el.parentElement));

Há um ótimo artigo sobre o empilhamento de contextos no MDN

Seus elementos precisam ter um positionatributo. (por exemplo absolute, relative, fixed) ou z-indexnão funcionará.

Em muitos casos, um elemento deve ser posicionado para z-indexfuncionar.

De fato, aplicar position: relativeaos elementos da pergunta provavelmente resolveria o problema (mas não há código suficiente fornecido para ter certeza).

Na verdade, position: fixed, position: absolutee position: stickytambém permitirá z-index, mas esses valores também mudar o layout. Com position: relativeo layout não é perturbado.

Essencialmente, desde que o elemento não seja position: static(a configuração padrão), ele será considerado posicionado e z-indexfuncionará.

Muitas respostas para "Por que o z-index não está funcionando?" perguntas afirmam que z-index só funciona em elementos posicionados. A partir do CSS3, isso não é mais verdade.

Elementos que são itens flexíveis ou itens de grade podem usar z-indexmesmo quando positionsão static.

Das especificações:

4.3 Pedido Z de item flexível

Os itens flexíveis pintam exatamente da mesma forma que os blocos embutidos, exceto que a ordem de documento modificada por ordem é usada no lugar da ordem bruta de documento e z-indexvalores diferentes de autocriar um contexto de empilhamento, mesmo que positionseja static.

5.4 Ordenação do eixo Z: a z-indexpropriedade

A ordem de pintura dos itens da grade é exatamente igual aos blocos embutidos, exceto que a ordem de documento modificada pela ordem é usada no lugar da ordem bruta de documento e z-indexvalores diferentes de autocriar um contexto de empilhamento, mesmo que positionseja static.

Aqui está uma demonstração do z-indextrabalho em itens flexíveis não posicionados: https://jsfiddle.net/m0wddwxs/