Por que o z-index não funciona?

181

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

insira a descrição da imagem aqui

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ê?

Linkjuice57
fonte

Respostas:

433

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.

Evert
fonte
3
acrescentando a esta resposta, cromo e provavelmente outros navegadores como da redação deste artigo exigem que você explicitamente estado position: relativepara z-index para o trabalho, apesar de elementos que se comportam de outras maneiras relativos por padrão
benipsen
staticelementos são estáticos e não podem se mover x, y or z planes. Eles não podem se mudar x plane (left or right)ou y plane (top or bottom)gostam quando trabalhamos position: absolute. E nem eles podem se mudar z plane i.e. with z-index.
Akash
você está ciente de quaisquer problemas com o uso z-indexde um elemento de grade?
Oldboy
59

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

Buksy
fonte
como consertar isso?
SM Pat
3
defina o índice z adequado dos elementos pai.
Buksy
amo esse roteiro
Matoeil
31

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

clem
fonte
26

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 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/

Michael Benjamin
fonte
3
"Elementos que são itens flexíveis ou itens de grade podem usar o índice z, mesmo quando a posição é estática." Sim, a especificação diz essencialmente tratar position: staticexatamente o mesmo que trataria position: relativepara itens flexíveis e de grade devido à natureza dinâmica desses métodos de layout. Então, talvez eu diga que não é mais verdade no CSS3 que um elemento precisa ser posicionado, mas que o CSS3 trata os itens flex e grid como se estivessem posicionados, independentemente. Apenas duas maneiras de olhar para a mesma coisa, provavelmente.
TylerH
@TylerH, devemos prestar atenção a essa parte da especificação porque devemos tratar a estática da mesma forma que a relativa apenas quando lidamos com o índice z e não em geral. Você não pode, por exemplo, mudar um item flexível usando esquerda / superior / inferior / direita, a menos que especifique explicitamente position:relative. Descendentes de itens flexíveis com posição absoluta não consideram o item flexível como seu bloco de contenção porque o item flexível não está posicionado. ( jsfiddle.net/0yo7utfL/2 )
Temani Afif
eu encontrei um "bug" estranho com css. por alguma razão overflow-y: scrollimpede overflow-x: visiblede funcionar ... você pode dar uma olhada?
Oldboy