November 10
Quando si applica Cascading Style Sheet codice a una pagina Web, gli elementi HTML che vengono resi visibili sono considerati detentori di una "scatola" di spazio sulla pagina. Prima di CSS, elementi della pagina non hanno in genere si sovrappongono, ma "scorreva" insieme secondo la formattazione applicata dal HTML. Con CSS, tuttavia, gli elementi possono essere posizionati arbitrariamente sulla pagina e possono sovrapporsi. Utilizzare la "z-index" nel codice CSS per determinare quali elementi box apparirà sotto o sopra gli altri quando si verifica la sovrapposizione.
1 Aggiungere il seguente codice CSS tra i tag "testa" del documento HTML:
<Style type = "text / css">
div {
border: 1px nero solido;
position: relative;
background-color: white;
}
.shadowbox {
position: absolute;
z-index: -1;
sinistra: 5px;
top: 5px;
width: 100%;
height: 100%;
background-color: grey;
}
</ Style>
La classe "shadowbox" sarà applicata a un elemento arco nidificato all'interno di un div. Notare il suo negativo "z-index", che farà sì di sedersi sotto altri elementi (il valore predefinito è 0), e il "position: absolute" linea, che rimuove dal normale flusso della pagina e lo posiziona rispetto alla sua elemento padre, che è il div potrai nido in. la sua larghezza e l'altezza sono impostate in modo che sia la stessa dimensione del div genitore. "Posizione: relative" è necessario che l'elemento genitore, perché altrimenti la durata annidati si posizionerà e dimensione stessa rispetto all'intero pagina.
2 Aggiungere il seguente codice al corpo del documento HTML:
<Div> Questo è un elemento div. Un elemento arco è annidato all'interno di esso, ma sembra posizionata sotto di esso. <Span class = "shadowbox"> </ span> </ div>
3 Salvare la pagina e caricare in un browser Web. L'elemento di campata, annidato all'interno del div, si spinse verso il basso ea destra dai e "Top" Proprietà "sinistra". Questo crea un effetto ombra sul div. Esperimento con le proprietà dichiarate nel codice CSS per vedere come la pagina cambia.