O que tem maior prioridade: opacidade ou z-index nos navegadores?

Estou codificando uma "janela pop-up" em JavaScript e me deparei com uma coisa interessante:

O quadrado da marinha sob a janela pop-up é visível, mesmo que eu esperasse que estivesse oculto. O pop-up foi adicionado após o quadrado, portanto deve estar no topo.

CSSopacity propriedade da praça da marinha é0.3. Pelo que tentei, parece que todos os números do intervalo(0,1) produziria o mesmo resultado. Se eu mudar para1, se comportará conforme o esperado (ou seja, a parte do quadrado sob o pop-up está oculta).

Eu tentei definir oz-index propriedade para10 para a praça e100 para o pop-up, mas não muda nada.

o que estou perdendo? Por que parte do quadrado é exibida?

Navegadores testados:

Firefox 3.6.xChrome 4

questionAnswers(7)

yourAnswerToTheQuestion