Essa pergunta pode ser resolvida de várias maneiras, mas, na verdade, conhecer as regras de empilhamento permite encontrar a melhor resposta que funciona para você.
Soluções
O <html>
elemento é o seu único contexto de empilhamento, portanto, basta seguir as regras de empilhamento dentro de um contexto de empilhamento e você verá que os elementos estão empilhados nessa ordem
- O elemento raiz do contexto de empilhamento (o
<html>
elemento neste caso)
- Elementos posicionados (e seus filhos) com valores de índice z negativos (valores mais altos são empilhados na frente de valores mais baixos; elementos com o mesmo valor são empilhados de acordo com a aparência no HTML)
- Elementos não posicionados (ordenados pela aparência no HTML)
- Elementos posicionados (e seus filhos) com um valor z-index de auto (ordenado pela aparência no HTML)
- Elementos posicionados (e seus filhos) com valores de índice z positivos (valores mais altos são empilhados antes de valores mais baixos; elementos com o mesmo valor são empilhados de acordo com a aparência no HTML)
Então você pode
- defina um índice z de -1, para o
#under
índice z -ve posicionado aparecer atrás do #over
elemento não posicionado
- defina a posição de
#over
para relative
que a regra 5 se aplique a ela
O verdadeiro problema
Os desenvolvedores devem saber o seguinte antes de tentar alterar a ordem de empilhamento dos elementos.
- Quando um contexto de empilhamento é formado
- Por padrão, o
<html>
elemento é o elemento raiz e o primeiro contexto de empilhamento
- Ordem de empilhamento em um contexto de empilhamento
A ordem de empilhamento e as regras de contexto de empilhamento abaixo são deste link
Quando um contexto de empilhamento é formado
- Quando um elemento é o elemento raiz de um documento (o
<html>
elemento)
- Quando um elemento possui um valor de posição diferente de estático e um valor de índice z diferente de automático
- Quando um elemento tem um valor de opacidade menor que 1
- Várias propriedades CSS mais recentes também criam contextos de empilhamento. Isso inclui: transformações, filtros, regiões css, mídia paginada e possivelmente outras. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
- Como regra geral, parece que se uma propriedade CSS requer renderização em um contexto fora da tela, ela deve criar um novo contexto de empilhamento.
Ordem de empilhamento em um contexto de empilhamento
A ordem dos elementos:
- O elemento raiz do contexto de empilhamento (o
<html>
elemento é o único contexto de empilhamento por padrão, mas qualquer elemento pode ser um elemento raiz para um contexto de empilhamento, consulte as regras acima)
- Você não pode colocar um elemento filho atrás de um elemento de contexto de empilhamento raiz
- Elementos posicionados (e seus filhos) com valores de índice z negativos (valores mais altos são empilhados na frente de valores mais baixos; elementos com o mesmo valor são empilhados de acordo com a aparência no HTML)
- Elementos não posicionados (ordenados pela aparência no HTML)
- Elementos posicionados (e seus filhos) com um valor z-index de auto (ordenado pela aparência no HTML)
- Elementos posicionados (e seus filhos) com valores de índice z positivos (valores mais altos são empilhados antes de valores mais baixos; elementos com o mesmo valor são empilhados de acordo com a aparência no HTML)
Adicionar
position: relative;
a #overViolino
fonte
</body>
e uma tag extra</html>
no final.position: relative
do elemento over realmente corrigiu meu problema.O índice z funciona apenas dentro de um contexto específico
relative
,fixed
ou seja ,absolute
posição.O índice z de uma div relativa não tem nada a ver com a
z-index
de uma div absoluta ou fixa.EDITAR
Esta é uma resposta incompleta.Esta resposta fornece informações falsas. Leia o comentário e o exemplo de @ Dansingerman abaixo.fonte
como sua
over
div não tem um posicionamento, o z-index não sabe onde e como posicioná-lo (e com relação a quê?). Apenas mude a posição do over div para relativo, para que não haja efeitos colaterais nesse div e, em seguida, o under div obedecerá à sua vontade.Aqui está o seu exemplo no jsfiddle: Fiddle
edit : vejo alguém já mencionou esta resposta!
fonte
Dê
#under
um negativoz-index
, por exemplo-1
Isso acontece porque a
z-index
propriedade é ignoradaposition: static;
, que passa a ser o valor padrão; portanto, no código CSS que você escreveu,z-index
é1
para ambos os elementos, independentemente da altura em que você o definir#over
.Ao dar
#under
um valor negativo, estará atrás de qualquerz-index: 1;
elemento, ie#over
.fonte
Eu estava construindo um menu de navegação. Eu tenho
overflow: hidden
no CSS da minha nav que escondeu tudo. Eu pensei que era um problema do índice z, mas realmente estava escondendo tudo fora da minha navegação.fonte
de acordo com a seção Sobreposição de elementos em http://web.archive.org/web/20130501103219/http://w3schools.com/css/css_positioning.asp
fonte
o comportamento de elementos fixos (e elementos absolutos), conforme definido em CSS Spec:
Isso torna o cálculo do zindex um pouco complicado, resolvi meu problema (a mesma situação) criando dinamicamente um contêiner no elemento body e movendo todos esses elementos (que são classificados como "my-fixed-ones" dentro desse elemento no nível do corpo )
fonte