Al termine dell’articolo di qualche giorno fà che trattava di posizionamento relativo, statico, fisso e assoluto, a qualcuno potrebbe esser sorto un dubbio : gli oggetti posizionati in uno dei seguenti metodi appena elencati potrebbero occupare aree già occupate da oggetti statici?
Certo che si. Prendete l’esempio grafico qui sotto (anche molto estremizzato, forse) dove, come vedete, alcuni blocchi (DIV#1 e DIV#5) con position:absolute si sovrappongono al blocco statico e senza posizionamento preciso (DIV#4).
La regola dice che quando un oggetto statico e uno non statico si sovrappongono, quello non statico si dispone su un livello superiore rispetto all’altro, coprendolo.
E quando ad incontrarsi sono, invece, due o più oggetti non statici?
In tal caso tutto è regolato dalla proprietà z-index che ammette come valore un intero positivo, negativo o nullo in modo tale che oggetti con z-index maggiore coprono oggetti con z-index minore. Tutto è abbastanza semplice.
Vediamo un esempio tratto da un tutorial css di html.net.
Supponiamo di dover simulare una partita di poker : abbiamo una scala reale e la vogliamo rappresentare graficamente. Quale miglior proprietà della z-index per ‘dipanare la matassa’ che potrebbe sembrar complicata?
Il tutto potrebbe venir rappresentato al meglio così :
Il codice nell’esempio delle carte sarà, banalmente, questo:
#ten_of_diamonds {
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}
#jack_of_diamonds {
position: absolute;
left: 115px;
top: 115px;
z-index: 2;
}
#queen_of_diamonds {
position: absolute;
left: 130px;
top: 130px;
z-index: 3;
}
#king_of_diamonds {
position: absolute;
left: 145px;
top: 145px;
z-index: 4;
}
#ace_of_diamonds {
position: absolute;
left: 160px;
top: 160px;
z-index: 5;
}
Come avrete notato si tratta un codice molto semplice dove spicca, per ogni selettore, la proprietà z-index con il relativo valore che ne sancisce l’importanza.
Alcune veloci precisazioni finali. A parità di z-index, il blocco posizionato più in basso copre il (i) blocco (blocchi) posizionati più in alto. Infine, tale proprietà non si applica mai ai blocchi statici.
