March 20
Cascading Style Sheet, o CSS, sovrapposizioni ti danno la possibilità di posizionare oggetti su altri oggetti in una pagina Web. elementi DIV - che contengono altri elementi HTML - sono candidati ideali per il posizionamento CSS. Utilizzare sovrapposizioni per evidenziare gli elementi importanti in una pagina Web. È inoltre possibile creare sovrapposizioni che causano il testo o le immagini grafiche di apparire ovunque ti piace come viene eseguita l'applicazione Web. Il CSS "assoluto" proprietà posizionamento rende possibile il processo di sovrapposizione.
1 Aprire uno dei documenti pagina web utilizzando un editor HTML o Notepad. Scegliere un documento che contiene diversi elementi come immagini, paragrafi o intestazioni. Questi serviranno da sfondo per la sovrapposizione DIV si creerà.
2 Individuare la sezione del documento "<body>" e incollare il seguente codice HTML in quella sezione:
<Div id = "div1" class = "divOverlay">
Questo è un overlay Div ->
</ Div>
<Input type = valore "pulsante" = "Clicca per Sovrapponi onclick =" return ShowOverlay ( 'div1', 100, 200) "/> </ p>
Questo crea un div con un ID di "div1" - fa riferimento a una classe CSS chiamato "divOverlay." Il pulsante sotto la DIV chiama il "ShowOverlay" funzione JavaScript - passa l'ID del DIV alla funzione, e passa anche la "X" e le coordinate desiderati "Y" su cui si desidera che il DIV a comparire sulla pagina Web. In questo esempio, la "X" di coordinate del valore è "100" e la "y" di coordinate del valore è "200."
3 Aggiungere questo codice CSS per la sezione del documento "<head>":
<Style type = "text / css">
.divOverlay {top: 0px; sinistra: 0px; position: absolute; visibility: hidden; z-index: 500;}
</ Style
Questo crea la "divOverlay" classe CSS descritto in precedenza. La posizione di valori superiore e di sinistra la sovrapposizione zero pixel dalla parte superiore della pagina Web e zero pixel da sinistra. valore "assoluto" della struttura posizione permette ai browser di spostare qualsiasi elemento che fa riferimento la classe. La proprietà z-index determina come un browser "stack", un elemento. Un elemento di pagina con un basso valore di z-index, come ad esempio "3", apparirà dietro un elemento con un valore z-index superiore. Utilizzando un valore molto grande - "500" in questo esempio - si assicura che il vostro sovrapposizione DIV appare di fronte a tutti gli oggetti, invece di dietro di loro. Nota valore di visibilità della classe è "nascosto" - questo rende il DIV invisibile quando la pagina viene caricata.
4 Incollare il seguente codice JavaScript sotto il codice CSS descritto nel passaggio precedente:
<Script language = tipo "javascript" = "text / javascript">
Funzione ShowOverlay (divID, xCoordinate, coordinata y) {
var divObject = document.getElementById (divID);
divObject.style.visibility = "visible";
divObject.style.left = xCoordinate;
divObject.style.top = coordinata y;
}
</ Script>
Questa è la funzione "ShowOverlay" chiamato quando si fa clic sul pulsante. Riceve l'ID del DIV e la "x" e la posizione "y" coordinate passati per l'evento clic del pulsante. Il codice fa poi il DIV visibile e lo sposta alle coordinate desiderate.
5 Salvare il documento e visualizzarlo in un browser. Fare clic su "Click in Sovrapponi Div" pulsante. Viene visualizzata la DIV, si muove alle coordinate specificati nel codice e si sovrappone qualsiasi oggetto che appare sotto di esso nella pagina Web.