Z-Index e relativo/Posizionamento assoluto

Question

Ho problemi con z-index e posizionamento. In sostanza, quando si passa sopra le voci di menu (casa, circa, ecc), spruzzi di vernice dovrebbero caricare sotto il menu:

http://www.saradouglas.net/home

foglio di stile si trova qui: http://www.saradouglas.net/wp-content/themes/sara-douglas-theme/style.css

questo ha funzionato bene quando ogni div spruzzi era impostato sul posizionamento assoluto, ma ho capito che questi sarebbero apparsi in posti diversi con risoluzioni dello schermo diverse. Ho pensato che sarebbe stato solo un caso di cambiare questo posizionamento relativo, e quindi di aggiustare le coordinate di conseguenza. Purtroppo ora i miei spruzzi non compaiono sotto il menu, come dovrebbero.

Per chiarire, voglio che gli spruzzi compaiano sotto il menu - quindi il menu dovrebbe sempre apparire in cima agli schizzi. Questo è solo diventato un problema da quando si imposta il menu a relativo, e questi schizzi su assoluto.

Spero che questo sia semplice da correggere e mi manca qualcosa. Spero che qualcuno qui possa dirmi dove sono andato male e offrire una soluzione!

Ci sono state alcune buone risposte inviate finora ma purtroppo non hanno risolto il mio problema. Ho provato ad aggiungere lo sfondo del menu alla classe UL piuttosto che al div, ma questo non ha cambiato il problema.

Grazie in anticipo.

Ross

Answer 1

Se ricordo bene l'ordine di precedenza di z-indici è qualcosa di simile

• tela (dove la elemento è disegnata/genitori zona drawable)
• immagini bg
• z-index: -1
• predefinito (0)
• z-index: 1+

Quando dunque fai qualsiasi elemento figlio di un z-index di -1, non andrà al di sotto del fondo i genitori a causa della genitori precedenza.

Ecco la soluzione. Ho appena provato Firebug e funziona:

1. Rimuovere l'immagine di bg da #menu e aggiungere un div separato sotto il ul.menu prima dei LI.
2. Dai il css qui sotto a questo div.
3. Ora date a tutte quelle pennellate un indice z più piccolo di -1. -2 opere.

E quello dovrebbe essere.

CSS:

position:absolute; 
top:0; 
bottom:0; 
left:0; 
right:0; 
z-index:-1; 
background: url(...); 

so che non più di tanto semantica, ma, hey funziona, giusto? : P

Answer 2

Si dovrebbe impostare la posizione relativa nella vostra div menu, quindi aggiungere div posizionamento assoluto nel div del menu. quindi le diverse risoluzioni dello schermo non è un problema.

Answer 3

Puoi farlo semplicemente impostando BG, imbottiture e l'altezza su ul invece di <div id="menu">