z-index non funziona con la posizione assoluta

Question

ho aperto la console (cromo \ firefox) e corse le seguenti righe:

$("body").append("<div id=\"popupFrame\" style=\"width:100%;height:100%;background-color:black;opacity:0.5;position:absolute;top:0;left:0;z-index:1;\" />"); 
$("body").append("<div id=\"popupContent\" style=\"width:200px;height:200px;z-index:1000;background-color:white;\" >dasdasdsadasdasdasdasdasd</div>"); 

Il #popupContent deve essere prima di tutto, ma questa è influenzata da l'opacità #popupFrame.

Il contenuto non è contenuto in #popupFrame ciò che lo rende molto strano.

L'obiettivo è quello di creare firefox come finestra di avviso

Io apprezzo qualsiasi tipo di aiuto.

Grazie in anticipo.

Answer 1

Il secondo div è position: static (il valore predefinito), quindi lo z-index non si applica ad esso.

È necessario posizionare (impostare la proprietà posizione su qualsiasi valore diverso da static, in questo caso si preferisce lo relative) qualsiasi cosa si desideri assegnare a z-index.

Answer 2

L'opacità cambia il contesto dello z-index, così come il posizionamento statico. O aggiungi l'opacità all'elemento che non ce l'ha o rimuovilo dall'elemento che lo fa. Dovrai anche rendere entrambi gli elementi statici posizionati o specificare la posizione relativa o assoluta. Ecco uno sfondo in alcuni contesti: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Answer 3

z-index si applica solo agli elementi a cui è stata assegnata una posizione esplicita. Aggiungi position:relative a #popupContent e dovresti essere pronto.

Answer 4

Vecchia domanda ma questa risposta potrebbe aiutare qualcuno.

Se si sta tentando di visualizzare il contenuto del contenitore al di fuori dei limiti del contenitore, assicurarsi che non sia presente overflow:hidden, altrimenti qualsiasi elemento esterno verrà interrotto.