Ouvrez un de vos documents à pages Web en utilisant un éditeur HTML ou Notepad. Choisissez un document qui contient plusieurs éléments tels que des images, des paragraphes ou des rubriques. Ceux-ci serviront de toile de fond pour la superposition DIV vous allez créer.
Localisez le document de "
" section et coller le code HTML suivant dans cette section:Ceci est un --gt Overlay Div;
Cela crée un DIV avec un ID de "div1" - il fait référence à une classe CSS nommée "divOverlay." Le bouton ci-dessous la DIV appelle le "ShowOverlay" fonction javascript - il passe l'ID de la DIV à la fonction, et passe aussi par le "X" et coordonnées désirées "y" de l'endroit où vous souhaitez la DIV à apparaître sur la page Web. La valeur de la valeur Dans cet exemple, le "X" de coordonnées est "100" et le "y" est coordonnée "200."
"
Ajouter ce code CSS pour le document de ".divOverlay {dessus: 0px- gauche: Position 0px-: visibilité absolute-: hidden- z-index: 500}
Cela crée la "divOverlay" Classe CSS décrit précédemment. La position des valeurs haut et à gauche la superposition zéro pixels du haut de la page Web et zéro pixels de la gauche. De la propriété position "absolu" valeur permet aux navigateurs de se déplacer tout élément qui fait référence à la classe. La propriété z-index détermine la façon dont un navigateur "piles" un élément. Un élément de la page avec une valeur de z-index faible, comme "3," apparaîtra derrière un élément avec une valeur de z-index plus élevé. En utilisant une très grande valeur - "500" dans cet exemple - vous vous assurez que votre superposition DIV apparaît en face de tous les objets au lieu de derrière eux. Notez la valeur de la visibilité de la classe est "caché" - Ce qui rend la DIV invisible quand la page se charge.
Collez le code javascript suivant ci-dessous le code CSS décrit dans l'étape précédente:
C'est le "ShowOverlay" fonction appelée lorsque vous cliquez sur le bouton. Il reçoit l'ID et le de la DIV "X" et "y" emplacement des coordonnées transmises par l'événement de clic de bouton. Le code fait alors la DIV visible et il se déplace vers les coordonnées désirées.
Enregistrez votre document et l'afficher dans un navigateur. Clique le "Cliquez pour Superposez Div" bouton. La DIV apparaît, se déplace aux coordonnées indiquées dans le code et recouvre tout objet qui apparaît en dessous sur la page Web.