z-index é um formigueiro. O melhor é realmente colocar o elemento que vai ficar por cima do lado de fora. Coloque janelas modals e prompts dentro do <body>
para evitar conflitos.
Para entender melhor o porquê deste problema, vamos dar uma olhada em como funciona o z-index:
Adaptado do MDN:
- Atribuir um valor de z-index em um elemento cria um contexto de "empilhamento".
- Contextos de empilhamento podem estar contidos em outros contexto. Juntos eles criam uma hierarquia de contextos de empilhamento.
- Cada contexto é completamente independente de seus irmãos: apenas elementos descendentes são considerados quando o empilhamento é processado.
- Cada contexto de empilhamento é contido em si mesmo: após o conteúdo de um elemento ser empilhado, o elemento inteiro é considerado na ordem do contexto de empilhamento do pai.
Complicou, não é?
Vamos dar uma olhada nesta estrutura:
z-index
div A 2
|--div AA 1
|--div AB 2
div B 1
|--div BA 3
|--div BB 4
Neste esquema div A tem z-index 2 e B tem z-index 1. Todas as divs dentro de Div B também terão z-index 1 quando comparadas com a Div A e suas divs filhas.
Os valores 3 e 4 de BA e BB só são válidos entre si, pois estão no mesmo contexto (nível).
Uma forma de "quebrar" a estrutura é atribuir um valor negativo ao z-index de uma div filha, mas note que essa abordagem não funciona no IE 6/7.
position:relative
que tinha usado para centralizar 100% sem usarmargin