Sovrapposizioni di foglio di stile o CSS, CSS vi diamo la possibilità di posizionare gli oggetti su altri oggetti su una pagina Web. Elementi DIV..--che contengono altri elementi HTML..--sono candidati ideali per il posizionamento CSS. Utilizzare le sovrapposizioni per evidenziare elementi importanti in una pagina Web. È inoltre possibile creare sovrapposizioni che causano testo o immagini grafiche per apparire ovunque che ti piace come l'esecuzione dell'applicazione Web. Il CSS "assoluto" proprietà di posizionamento rende possibile il processo di sovrapposizione.
Istruzioni
1
Aprire uno dei vostri documenti di pagina Web utilizzando un editor HTML o blocco note. Scegli un documento che contiene numerosi elementi quali immagini, paragrafi o intestazioni. Questi servirà come sfondo per la sovrapposizione DIV che verrà creato.
2
Individuare il documento "< body >" sezione e incollare il seguente codice HTML in quella sezione:
< div id = "div1" class = "divOverlay" >
Si tratta di un Div Overlay-->
< / div >
< tipo input = "pulsante" value = "Clicca per sovrapposizione onclick ="return ShowOverlay ('div1', 100, 200)"/ >< / p >
Questo crea un DIV con ID "div1" - fa riferimento a una classe CSS denominata "divOverlay." Il pulsante sotto il DIV chiama la funzione JavaScript "ShowOverlay"--passa ID di DIV alla funzione e passa anche il desiderato "x" e "y" coordinate di cui si desidera che il DIV a comparire sulla pagina Web. In questo esempio, valore di coordinata di "x" è "100" e valore della "y" coordinata è "200".
3
Aggiungere questo codice CSS alla sezione "< head >" del documento:
< style type = "text/css" >
.divOverlay {left: 0px; posizione: assoluto, top: 0px; visibilità: nascosto; z-indice: 500;}
< / stile
Questo crea la classe CSS "divOverlay" descritta in precedenza. I valori superiore e sinistro posizionare la sovrapposizione zero di pixel dalla parte superiore della pagina Web e zero pixel da sinistra. Posizione "assoluta" il valore della proprietà consente ai browser di spostare qualsiasi elemento che fa riferimento alla classe. La proprietà z-index determina come un browser "stack" di un elemento. Dietro un elemento con un valore z-index superiore verrà visualizzato un elemento di pagina con un valore di z-indice basso, ad esempio "3". Utilizzando un valore molto grande... "500" in questo esempio-- è assicurarsi che il proprio overlay che div appare davanti a tutti gli oggetti anziché dietro di loro. Nota la classe valore di visibilità è "nascosto"..--in questo modo il DIV invisibile quando la pagina viene caricata.
4
Incollare il seguente codice JavaScript sotto il codice CSS descritto nel passaggio precedente:
< script language = "javascript" type = "text/javascript" >
Function () {ShowOverlay (divID, xCoordinate, yCoordinate)
var divObject = document.getElementById(divID);
divObject.style.visibility = "visibile";
divObject.style.left = xCoordinate;
divObject.style.top = yCoordinate;
}
< / script >
Questa è la funzione di "ShowOverlay" chiamata quando si sceglie il pulsante. Riceve ID di DIV e la "x" e "y" coordinate di posizione passate dal pulsante fare clic su evento. Il codice quindi rende visibile il DIV e sposta le coordinate desiderate.
5
Salvare il documento e visualizzarlo in un browser. Fare clic sul pulsante "Clicca per Div Overlay". Il tag DIV viene visualizzato, sposta le coordinate specificate nel codice e sovrapposizioni di qualsiasi oggetto che appare sotto di esso nella pagina Web.
Consigli & Avvertenze
- Quando si chiama il "ShowOverlay", essere sicuri di passare l'ID del proprio overlay DIV e le due "x" e "y" le coordinate dello schermo. È possibile chiamare la funzione in qualsiasi momento, anche dopo il caricamento della pagina. In questo modo il proprio overlay a vengono visualizzati quando un utente vede prima la tua pagina.
- Il tag DIV in questo esempio contiene testo, ma è possibile inserire qualsiasi elemento che ti piace all'interno dei tag DIV. Per esempio, per sovrapporre una freccia sopra qualche oggetto sulla pagina, trova un'immagine di una freccia e Aggiungi il tag "Img" DIV. La freccia si sposta quindi la posizione della pagina desiderata quando si chiama la funzione JavaScript.