Résumé de 4 méthodes pour que le calque flottant div, le déplacement et la position de la barre de défilement restent inchangés

Auteur：Eve Cole Date de mise à jour：2025-03-03 19:48:02

Le div reste en haut et la barre de défilement défile, mais le div est toujours en haut ! Téléchargez directement le code source :

Première méthode :

Copiez le code comme suit :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<tête>

<title>Couche flottante div, la barre de défilement se déplace, gardant la position inchangée</title>

corps{background-image:url(about:blank);background-attachment:fixed;}

#float{largeur:344px;hauteur:34px;bordure:1px solide #C0DBF8;position:absolue;haut:0px;}

</style>

</tête>

<corps>

</corps>

var IO=document.getElementById('float'),Y=IO,H=0,IE6;

IE6=window.ActiveXObject&&!window.XMLHttpRequest;

while(Y){H+=Y.offsetTop;Y=Y.offsetParent};

si (IE6)

IO.style.cssText="position:absolute;top:(this.fix?(document.documentElement.scrollTop-(this.javascript||"+H+")):0)";

window.onscroll=fonction (){

var d=document,s=Math.max(d.documentElement.scrollTop,document.body.scrollTop);

if(s>H&&IO.fix||s<=H&&!IO.fix)return;

if(!IE6)IO.style.position=IO.fix?"": "fixé";

IO.fix=!IO.fix;

} ;

essayez{document.execCommand("BackgroundImageCache",false,true)}catch(e){};

</script>

</html>

Deuxième méthode :

Copiez le code comme suit :

<div>

</div>

Calque centré

</body></STRONG>

Troisième méthode :

Copiez le code comme suit :

Calque centré

</div>

</corps>

Méthode 4 : [Utiliser CSS pour centrer]

Copiez le code comme suit :

<!--

html, corps {hauteur : 100 % ; marge : 0px ; taille de police : 12px ;}

.mondiv {

couleur d'arrière-plan : #f9fff6 ;

bordure : 1px solide #009900 ;

alignement du texte : centre ;

hauteur de ligne : 25 px ;

taille de police : 13 px ;

poids de la police : gras ;

indice z : 99 ;

largeur : 300 px ;

hauteur : 50px ;

gauche : 50 % ;/*FF IE7*/

haut : 50 % ;/*FF IE7*/

margin-left:-150px!important;/*FF IE7 la moitié de sa largeur */

margin-top:-60px!important;/*FF IE7 la moitié de sa hauteur*/

marge supérieure : 0 px ;

position:fixe!important;/*FF IE7*/

position:absolue;/*IE6*/

_top : expression(eval(document.compatMode &&

document.compatMode=='CSS1Compat') ?

documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/

document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

}

-->

</style>

fonction showDiv(){

document.getElementById('popDiv').style.display='block';

}

window.onload=fonction(){

showDiv();

}

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<tête>

<title>Toujours au milieu DIV (prend en charge IE FF)</title>

</tête>

<corps>

<div id="popDiv" style="display:none;">Toujours au milieu<br/>

</div>

</corps>

</html>