CSS Livelli (Livelli)

L'attributo z-index CSS può essere utilizzato insieme all'attributo position per creare effetti di livello come Photoshop.

Sovrapponi gli elementi del livello utilizzando l'attributo z-index

Di solito si considera la pagina HTML come una pagina bidimensionale, perché i testi, le immagini e altri elementi sono disposti sulla pagina senza sovrapposizione. Ma oltre alla loro posizione orizzontale e verticale, è possibile utilizzare l'attributo CSS z-index per sovrapporre le scatole lungo l'asse z, ossia una sovrapposta su un'altra sovrapposta.PositionIl valore è uno dei seguenti: absolute, fixed o relative.

La posizione di ogni strato nell'asse z è rappresentata da un intero che indica l'ordine di sovrapposizione della visualizzazione. Gli elementi con z-index più grandi sovrappongono quelli con z-index più bassi.

Un attributo z-index può aiutarti a creare layout di pagina web più complessi. Ecco un esempio di come creare livelli in CSS.

.box{
　　width: 150px;
　　height: 150px;
　　opacity: 0.9;
　　position: absolute;　　　　　　　　　　　　　　　　　　　　　　　
　　top: 30px;
　　left: 30px;
}
.red{
　　background: #ff0000;
　　z-index: 1;
}
.green{
　　background: #00ff00;
　　z-index: 2;
}
.blue{
　　background: #0000ff;
　　z-index: 3;
}

L'effetto dopo l'esecuzione è il seguente:

Usiamo lo stile di sovrapposizione z-index, nel layout DIV+CSS reale abbiamo bisogno di uno stile di posizionamento assoluto e possiamo utilizzare left, right per posizionare, attraverso valori di z-index diversi per realizzare l'ordinamento sovrapposto dei livelli.