Zusammenfassung von 4 Methoden, um die Div-Ebene schweben zu lassen, die Bildlaufleiste zu verschieben und ihre Position unverändert zu lassen

Autor：Eve Cole Aktualisierungszeit：2025-03-03 19:48:02

Das Div bleibt oben und die Bildlaufleiste scrollt, aber das Div ist immer noch oben! Laden Sie den Quellcode direkt hoch:

Methode eins:

Kopieren Sie den Codecode wie folgt:

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

<Kopf>

<title>div schwebende Ebene, Bildlaufleiste bewegt sich, Position bleibt unverändert</title>

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

#float{width:344px;height:34px;border:1px solid #C0DBF8;position:absolute;top:0px;}

</style>

</head>

<Körper>

</body>

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

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

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

if(IE6)

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

window.onscroll=function (){

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?":"fixed";

IO.fix=!IO.fix;

};

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

</script>

</html>

Methode zwei:

Kopieren Sie den Codecode wie folgt:

<div>

</div>

Zentrierte Ebene

</body></STRONG>

Methode drei:

Kopieren Sie den Codecode wie folgt:

Zentrierte Ebene

</div>

</body>

Methode 4: [CSS zum Zentrieren verwenden]

Kopieren Sie den Codecode wie folgt:

<!--

html,body {height:100%; margin:0px;font-size:12px;}

.mydiv {

Hintergrundfarbe: #f9fff6;

Rand: 1px durchgezogen #009900;

Textausrichtung: Mitte;

Zeilenhöhe: 25px;

Schriftgröße: 13px;

Schriftstärke: fett;

Z-Index:99;

Breite: 300px;

Höhe: 50px;

links:50%;/*FF IE7*/

top:50%;/*FF IE7*/

margin-left:-150px!important;/*FF IE7 die Hälfte seiner Breite */

margin-top:-60px!important;/*FF IE7 halb so hoch*/

margin-top:0px;

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

Position:absolut;/*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>

Funktion showDiv(){

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

}

window.onload=function(){

showDiv();

}

</script>

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

<Kopf>

<title>Immer im mittleren DIV (unterstützt IE FF)</title>

</head>

<Körper>

<div id="popDiv" style="display:none;">Immer in der Mitte<br/>

</div>

</body>

</html>