CSS - z-index non funziona correttamente

Sto usando z-index sulla mia pagina (-link non è più necessario-), e non funziona correttamente: non pone alcune div al di sopra di tutte le altre ..CSS - z-index non funziona correttamente

Si può vedere da soli, facendo clic su uno degli elementi nella barra di sinistra o destra. Quindi, la maschera si dissolverà, ma mostrerà la finestra di messaggio, sotto di essa. Ho provato molto, ma non riesco a visualizzare la finestra di messaggio sopra tutti gli altri ...

Cosa posso fare per risolvere questo problema?[Nota: 2 ° domanda qui sotto]

Se non si desidera controllare la pagina, la finestra di messaggio si trova in alcuni altri div:

posizionamento

<div> 
<div> 
    <div>message box</div> 
</div> 
</div>

Il CSS è come questo:

.window { 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: 100; 
}

io uso position: fixed, perché la posizione: assoluta non è assoluta qui, il div non è allineato al corpo, ma qualcos'altro in qualche modo. C'è un modo per reimpostare il posizionamento e la posizione assoluta di nuovo?

fonte

2011-11-28 laarsk

+11

z-index funziona solo quando è applicato a elementi che hanno lo stesso tipo di posizionamento. Quindi se un elemento è fuori dalla dom tramite assoluta o qualche altra posizione allora il suo z-index non sarà relativo ad altri elementi nella dom ma solo a elementi che hanno lo stesso tipo di posizionamento. – Ryan

Oh ok, quindi un oggetto fisso non può sovrapporsi a un oggetto assoluto? – laarsk

corretto perché secondo lo z-index e il dom non sono realmente uno relativo all'altro e infatti poiché un oggetto assoluto è fuori dal dom quello fisso non sa nemmeno che è lì per andare su di esso. – Ryan

Se stai usando jQuery controllare la top Z Index Plug In, è possibile applicarlo quando l'oggetto ha un mouse evento come:

<div id="modal" onmouseover="$(this).topZIndex();"></div>

quindi modificare la posizione di assoluto con jQuery anche o viceversa:

$(document).ready(function(){ $('#modal').css('position','absolute'); });

fonte

2011-11-28 21:53:47 raphie

Hmmm, non sembra per funzionare ... ho incluso in un altro script jQuery, ma ora mi dà l'errore che launchWindow non è definito ... qualche indizio su cosa fare? Inoltre, la posizione deve essere "fissa", come ho descritto sopra , funzionerà anche? – laarsk

Ora ho messo la riga '' sopra l'altro script, e non ci sono più errori.Tuttavia, il problema di z-index è sempre lo stesso ... – laarsk

Il div è all'interno di un iframe o di un altro div? – raphie

screenshot

se si rimuove z-index da #leftbar si risolve il problema. La posizione non dovrebbe importare, purché tu ne abbia una.

fonte

2011-11-28 21:58:20 Michael

Sfortunatamente, che z-index è necessario per il resto della pagina :(Forse conosci un'altra soluzione? – laarsk

quando apri il popup, rimuovi #leftbar z-index, when chiudi il popup, aggiungilo di nuovo. :) – Michael

un'altra soluzione sarebbe avere un layout a 3 colonne in cui la tua mappa non è larga al 100%, quindi non avresti bisogno di z-index sulle colonne. – Michael

Per quanto posso ricordare, i problemi di z-index derivano spesso dal fatto che i genitori degli elementi z-index non sono posizionati. I genitori dei fratelli e sorelle dovrebbero essere posizionati.

fonte

2011-11-29 11:07:09

CSS - z-index non funziona correttamente

risposta

Problemi correlati