La proprietà "z-index" in CSS (Cascading Style Sheets) indica al browser come impilare oggetti su una pagina Web. Questo è utile quando si desidera forzare una barra di navigazione su un blocco di contenuto o nascondere parzialmente uno casella dietro l'altro. Per poter utilizzare "z-index" accatastamento, gli oggetti devono già avere una posizione, ma è possibile impostare gli oggetti da utilizzare posizionamento «relativa» che non ha alcun effetto dove essi visualizzare sulla pagina a meno che non si modificano i valori di "superiore" e "sinistro". Utilizzare "z-index" con "top" e "sinistra" per impilare e si sovrappongono oggetti.

Istruzioni

1

Aprire la pagina Web in un editor e trovare i nomi di ID degli oggetti inferiore e parte superiore:

< div id = "top" >
Oggetto superiore qui
< / div >
< div id = "in basso" >
Oggetto di fondo qui
< / div >

Aggiungere ID nomi se vedete nessuno, seguendo gli esempi riportati sopra.

2

Vai ai tag di "stile < >" della tua pagina Web situato nella testa o aprire il foglio di stile. Aggiungere "stile < >" tag tra i tag "< head >" se non si dispone di una delle seguenti operazioni:

< style type = "text/css" >
< / stile >

3

Scrivere una regola di stile per ogni oggetto:

Top () {

}

inferiore () {

}

Queste regole di stile selezionare gli oggetti con i loro nomi di ID.

4

Dare ad ogni oggetto una posizione relativa e impostarne le proprietà "z-index":

Top () {

Posizione: relativo;
z-indice: 1;
}

inferiore () {

Posizione: relativo;
z-indice: 0;
}

Poiché l'oggetto di fondo ha un valore di "z-index" inferiore rispetto l'oggetto superiore verrà visualizzato sotto l'oggetto superiore. A questo punto, tuttavia, appena verrà visualizzato accanto all'oggetto superiore.

5

Spostare la posizione dell'oggetto inferiore di metterlo dietro l'oggetto superiore. È possibile modificare la posizione di un oggetto di impostazione "top" e "sinistra" proprietà:

inferiore () {

Posizione: relativo;
z-indice: 0;
Top:-50px;
sinistra:-50px;
}

Questo esempio sposta l'oggetto di fondo dietro l'oggetto top 50 pixel a destra e 50 pixel fino dalla sua posizione originale.

Consigli & Avvertenze

• Controllare la proprietà "z-index" di altri oggetti di pagina; Se questa proprietà viene utilizzata un oggetto padre gli oggetti nidificati ereditano la sua posizione di "z-index".