September 14
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.
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.