Codice del foglio di stile CSS rende possibile per posizionare gli elementi HTML in una pagina Web. Una volta che si imposta la proprietà di "posizione" per un elemento, è possibile spostare l'elemento alla parte superiore o inferiore e sinistra o verso destra. Esiste anche una sovrapposizione proprietà ordine - lo z-index - per gli elementi posizionati. Per spostare un blocco di testo HTML rispetto ad un altro, ad esempio, è necessario dare ogni blocco di un tipo di posizione e z-index.

Istruzioni

1

Aprire il file HTML in un editor di codice o crearne uno nuovo e inserire i due blocchi di testo. È necessario un insieme di tag avvolgendo ogni blocco di testo. Maggior parte dei tag funzionano, ma < span > < li > sono necessari un codice CSS aggiuntivo più tardi quindi verranno visualizzati come blocchi. Assicurarsi che entrambi i blocchi di testo sono adiacenti a vicenda. Aggiungere una nuova riga sopra il primo blocco e aggiungere un tag < div >. Chiudere il < div > aggiungendo < / div > sotto il secondo blocco di testo. Dare il < div > un attributo "ID". Dare il tag avvolgendo ogni blocco di testo di un attributo "ID" come bene. I due blocchi potrebbero assomigliare a questo:

< div id = "text-wrapper" >

< div id = "first" > Ecco alcuni sample text. < / div >

< div id = "secondo" > Ecco qualche altro esempio testo. < / div >

< / div >

2

Aprire il tuo file CSS o trovare lo stile di < > e < / stile > tag nel file HTML. Se non si utilizza un file CSS esterno e non ci sono nessun tag < style >, aggiungerli tra < head > e < / head > nel file HTML. Nel codice CSS, impostare la posizione di tale elemento < div > "parente" in questo modo:

Testo-wrapper {posizione: relativo;} 3

Aggiungere il posizionamento assoluto per entrambi gli elementi del blocco di testo. Dopo aver impostato la posizione in assoluto, è possibile specificare il numero di pixel alla parte superiore o inferiore e sinistra o verso destra. Poiché avete impostato il wrapping < div > utilizzare il posizionamento relativo, il vostro posizioni assolute sono solo assoluti all'interno dello spazio relativamente posizionato di quel < div >.

primo {posizione: absolute; top: 0px; sinistra: 0px;} secondo {posizione: absolute; top: 5px; sinistra: 5px;}

Nell'esempio precedente, il primo blocco di testo raggiungerà il picco fuori dietro il secondo blocco di cinque pixel in alto a sinistra e cinque pixel a sinistra.

4

Dare ogni blocco di testo un valore z-index per raccontare il browser per visualizzare uno sopra l'altro. Il valore più basso per un z-index è zero, mentre quella massima è 9999 (non includere una virgola). Non aggiungere "px" o "em" per lo z-index come non ci vuole un'unità di misura.

primo {posizione: absolute; top: 0px; sinistra: 0px; z-indice: 1;} secondo {posizione: absolute; top: 5px; sinistra: 0px; z-indice: 0;}

Questo codice inserirà il secondo blocco di testo sotto il primo, e poi il primo blocco di testo sarà cinque pixel sopra il secondo e cinque pixel a destra.

Consigli & Avvertenze

• Uso il: il pseudo-selettore al passaggio del mouse per modificare z-index di un elemento. Questo rende possibile effettuare un elemento sollevare di sopra di un altro quando l'utente mouses sopra una parte della pagina web. Il: pseudo-selettore al passaggio del mouse funziona in tutti i browser tranne Internet Explorer 6, che ne consente solo l'utilizzo su < a > Tag.