Z-index problemi di sovrapposizione sfondi

[axxe16]

Ciao a tutti,
sto cercando di imparare ad utilizzare correttamente i CSS per realizzare layout tableless e devo dire che lo trovo molto stimolante. Quello che non riesco proprio a capire è il funzionamento di z-index... o meglio credevo di averlo capito ma evidentemente... il mio problema sono delle immagini di sfondo che non si sovrappongono come vorrei. Potete vedere la pagina che sto facendo a:questo indirizzo

Ad esempio la colonna centrale l'ho fatta così:
#contenuto {
width:450px;
margin:auto;
margin-top:15px;
background-color:#DCD7CE;
z-index:20;
}

mentre il fiore in alto a destra così:
#fioresfondo {
background-color:#006699;
background-image:url(../img/flower_3.gif);
position:absolute;
right:0;
top:50%;
margin-top:-150px;
height:518px;
width:337px;
background-repeat:no-repeat;
z-index:10;
}

Qualche consiglio

[seed_squall_it]

Alcune cose su z-index che forse non sai per chiarirti le idee (e avere ragione di IE evitando molti mal di testa! ).

z-index può essere applicato solo ai box posizionati in modo fisso, assoluto o relativo. Con i box posizionati in modo statico (ovvero tutti quelli per cui non definisci un valore di position diverso), non ha nessun effetto (e nemmeno ha senso).

Teoricamente, stando al W3C, il valore di z-index riguarda nel complesso tutti i box nella pagina. Mi spiego meglio. Se hai due box posizionati non in modo statico, quello che nel codice è scritto per ultimo ha sempre uno z-index maggiore del precedente (ricorda che se hai box posizionati in modo assoluto, relativo o fisso, essi hanno automaticamente uno z-index maggiore dei box statici. Tu puoi specificare uno z-index maggiore per alterare come preferisci la loro "altezza" rispetto al "piano" del body).

IE 5/6 invece ha un'interpretazione diversa. Se hai 2 box position: relative che contengono entrambi dei box posizionati in modo assoluto al loro interno, per IE tutti i box assoluti del primo box relative non sono MAI più "alti" rispetto al secondo box relative, nemmeno se attribuisci esplicitamente z-index: 1000 a tutti loro!
Questo perché IE considera lo z-index non rispetto alla pagina, ma rispetto al box contenitore. Per lui, avendo 2 box position relative, il secondo è sempre (giustamente) più "alto" del primo in mancanza di uno z-index esplicito. Tuttavia, proprio per questo, tutti i box assoluti dentro il primo box relative sono considerati più "bassi" del secondo box relative, che quindi si sovrappone ad essi anche se hanno uno z-index elevatissimo. La soluzione in un caso come questo, è assegnare uno z-index esplicito non ai singoli box position: absolute dentro il primo box position: relative, ma direttamente a quest'ultimo.

Infine, ricorda che tutti i box posizionati in modo fisso, relativo o assoluto sono estratti dal normale flusso del documento e quindi non ne condizionano il layout.
IE (ovviamente!) ha almeno 4 bug con i box posizionati in modo assoluto che si verificano in determinate situazioni...

PS: usa z-index sempre con degli elementi a livello di blocco come i div, i p, ecc. e non direttamente su elementi rimpiazzati come le immagini...questo ti eviterà numerosi grattacapi con IE che gestisce talvolta gli elementi in linea e rimpiazzati in modo indecente!

[seed_squall_it]

Proprio riguardo a quello che ho detto...vedo che hai assegnato z-index: 20 al box #contenuto...che però è un box posizionato in modo statico (quindi z-index non ha effetto per quel box).

[axxe16]

umh ok...(un bel casino ) grazie mille per la dettagliatissima spiegazione... ma da quello che ho letto con la struttura che ho dato al contenuto non ho modo tenere nello sfondo i fiori...come posso fare per farli diventare "parte dello sfondo"?

[seed_squall_it]

Beh, se intendi come "alzare" il box del contenuto (come penso volessi fare con z-index: 20), potresti provare a impostare #contenuto con position: relative SENZA specificare un offset (uno scostamento) tramite le proprietà top, right, bottom e/o left. Non l'ho mai fatto, ma dovrebbe funzionare. Il mio dubbio è il fatto che non specificando un offset per #contenuto, questo, pur essendo posizionato in modo relativo, continua a influire sul layout come se fosse posizionato in modo statico. Per questo non ti so dire se in un caso come questo z-index funzionerebbe su quel box...dovrei provare.
Anche se a intuito dovrebbe andare, perché il box è comunque position: relative...altrimenti dovresti rivedere la struttura dei box.

[axxe16]

grazie della dritta...ho ancora le idee un pò confuse ma farò un pò di prove. Grazie ancora!

[seed_squall_it]

Beh, se hai le idee un po' confuse, c'è sempre questo forum!
Spero vada tutto bene con l'"esperimento" dello z-index.

[axxe16]

grazie siente insostituibili

[axxe16]

Originariamente inviato da seed_squall_it
Beh, se intendi come "alzare" il box del contenuto (come penso volessi fare con z-index: 20), potresti provare a impostare #contenuto con position: relative SENZA specificare un offset (uno scostamento) tramite le proprietà top, right, bottom e/o left. Non l'ho mai fatto, ma dovrebbe funzionare. Il mio dubbio è il fatto che non specificando un offset per #contenuto, questo, pur essendo posizionato in modo relativo, continua a influire sul layout come se fosse posizionato in modo statico. Per questo non ti so dire se in un caso come questo z-index funzionerebbe su quel box...dovrei provare.
Anche se a intuito dovrebbe andare, perché il box è comunque position: relative...altrimenti dovresti rivedere la struttura dei box.

ok ho fatto un pò di prove ma ho ancora dei dubbi...
ad esembio la id main contiene in background la barra rossa di sinistra in position relative e z-index 21, anche l'id logo è sempre relative e z.index 20... a rigor di logica la barra dovrebbe sovrapporsi al logo (se si ridimensiona la pagina). Perchè no?!?! Infatti lo stesso problema l'avevo riscontrato anche per le decorazioni in fondo alla pagina e l'ho "risolto" spostando la decorazione a destra...
riporto il link alla pagina
http://www.thewhitefly.net/thewhitefly.html

riporto il pezzo di css

#main { background-image:url(../img/barra_sx.gif);
position:relative;
background-repeat:repeat-y;
z-index:21;
}
#logo {

background-image:url(../img/fly_logo.jpg);
background-repeat:no-repeat;
height:216px;
width:699px;
position:relative;
left:50%;
margin-left:-350px;
top:0px;
z-index:20;
}

logo è figlio di main... forse centra quello?
thewhitefly

[seed_squall_it]

Se logo è figlio di main mi sa proprio che il problema è quello. Se hai main con z-index maggiore di logo, allora main dovrebbe essere sovrapposto a logo, che però in un caso del genere dovrebbe essere completamente "coperto" da main essendone figlio. Mi sa che hai risposto senza volerlo al dubbio che avevo circa la position: relative senza offset con z-index specificato. Può darsi che davvero z-index non abbia effetto sui box posizionati in modo relativo senza un offset specificato (quei box infatti continuano ad influire sul layout, come se fossero posizionati in modo statico). Di solito, si usa un contenitore position: relative per posizionare in modo assoluto dei box "figli" al suo interno con uno z-index che, ovviamente, è maggiore di quello del box "padre". Il tuo caso in effetti è un po' "anomalo"...

Prova a questo punto a specificare per i box position: relative un offset nullo (top: 0; left: 0). Così la loro posizione non cambia e sono posizionati in modo relativo a tutti gli effetti. L'unico "inconveniente" è che in quel modo non influiranno più sul layout degli altri box statici che li circondano...quindi potresti vedere il layout completamente "stravolto"...