Come fare un blocco di codice HTML di testo appaiono davanti ad un altro

September 14

Come fare un blocco di codice HTML di testo appaiono davanti ad un altro


Cascading Style Sheet codice permette di posizionare gli elementi HTML in una pagina Web. Una volta impostata la proprietà "position" per un elemento, è possibile spostare l'elemento verso l'alto o il basso e verso destra o sinistra. Esiste anche una proprietà ordine di sovrapposizione - lo z-index - per gli elementi posizionati. Per spostare un blocco di testo HTML rispetto ad un altro, per esempio, è necessario dare ogni blocco un tipo di posizione e z-index.

istruzione

1 Aprire il file HTML in un editor di codice o di crearne uno nuovo e mettere i due blocchi di testo. Hai bisogno di un insieme di tag avvolgimento intorno ad ogni blocco di testo. La maggior parte dei tag funzionano, ma <span> e <li> bisogno di un codice CSS più tardi in modo che verranno visualizzati come blocchi. Assicurarsi che entrambi i blocchi di testo sono adiacenti gli uni agli altri. Aggiungere una nuova riga sopra il primo blocco e aggiungere un tag <div>. Chiudere il <div> aggiungendo </ div> al di sotto del secondo blocco di testo. Dare il un attributo <div> "ID". Dare il tag involucro attorno a ciascun blocco di testo un "ID" attributo pure. I suoi due blocchi potrebbe essere simile a questo:

<Div id = "text-wrapper">

<Div id = "primo"> Ecco qualche testo di esempio. </ Div>

<Div id = "secondo"> Ecco qualche testo di esempio. </ Div>

</ Div>

2 Aprire il file CSS o trovare il <style> e </ style> tag nel file HTML. Se non si utilizza un file CSS esterno e non ci sono i tag <style>, aggiungerli tra <head> e </ head> nel file HTML. Nel codice CSS, impostare la posizione della confezione <div> elemento a "relativa" in questo modo:

text-wrapper {position: relative;}

3 Aggiungere posizionamento assoluto per entrambi gli elementi blocco di testo. Una volta impostata la posizione di assoluta, è possibile specificare il numero di pixel per la parte superiore o inferiore e sinistro o destro. Dal momento che si imposta l'involucro <div> di utilizzare il posizionamento relativo, le vostre posizioni assolute sono assoluti solo all'interno dello spazio relativamente in posizione di quel <div>.

prima {position: absolute; top: 0px; sinistra: 0px;} {seconda posizione: assoluta; top: 5px; sinistra: 5px;}

Nell'esempio precedente, il primo blocco di testo picco dietro il secondo blocco di cinque pixel sulla parte superiore e cinque pixel sulla sinistra.

4 Dare ad ogni blocco di testo un valore z-index per dire browser per visualizzare uno sopra l'altro. Il valore più basso per un z-index è pari a zero, mentre la più alta è 9999 (non includere una virgola). Non aggiungere "px" o "em" al z-index in quanto non tiene un'unità di misura.

prima {position: absolute; top: 0px; sinistra: 0px; z-index: 1;} secondo {position: absolute; top: 5px; sinistra: 0px; z-index: 0;}

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

Consigli e avvertenze

  • Utilizzare il: hover pseudo-selettore per cambiare z-index di un elemento. In questo modo sarà possibile effettuare un raise oggetto sopra l'altro quando passaggio del mouse su una parte della pagina web. L': hover opere pseudo-selettore a tutti i browser tranne Internet Explorer 6, che consente solo l'utilizzo sui tag <a>.