Resumen de 4 métodos para hacer que la capa flotante div, el movimiento de la barra de desplazamiento y la posición permanezcan sin cambios

Autor：Eve Cole Fecha de actualización：2025-03-03 19:48:02

El div permanece en la parte superior y la barra de desplazamiento se desplaza, ¡pero el div todavía está en la parte superior! Sube el código fuente directamente:

Método uno:

Copie el código de código de la siguiente manera:

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

<title>capa flotante div, la barra de desplazamiento se mueve, manteniendo la posición sin cambios</title>

cuerpo {imagen de fondo: URL (acerca de: en blanco); archivo adjunto de fondo: fijo;}

#float{ancho:344px;alto:34px;borde:1px sólido #C0DBF8;posición:absoluta;arriba:0px;}

</estilo>

</cabeza>

</cuerpo>

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

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

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

si (IE6)

IO.style.cssText="posición:absoluta;top:(this.fix?(document.documentElement.scrollTop-(this.javascript||"+H+")):0)";

ventana.onscroll=función (){

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

IO.fix=!IO.fix;

};

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

</script>

</html>

Método dos:

Copie el código de código de la siguiente manera:

<div>

</div>

Capa centrada

</cuerpo></STRONG>

Método tres:

Copie el código de código de la siguiente manera:

Capa centrada

</div>

</cuerpo>

Método 4: [Usar CSS para centrar]

Copie el código de código de la siguiente manera:

<!--

html,cuerpo {altura:100%; margen:0px; tamaño de fuente:12px;}

.mydiv {

color de fondo: #f9fff6;

borde: 1px sólido #009900;

alineación de texto: centro;

altura de línea: 25 px;

tamaño de fuente: 13px;

peso de fuente: negrita;

índice z: 99;

ancho: 300px;

altura: 50 píxeles;

izquierda:50%;/*FF IE7*/

arriba:50%;/*FF IE7*/

margin-left:-150px!important;/*FF IE7 la mitad de su ancho */

margin-top:-60px!important;/*FF IE7 la mitad de su altura*/

margen superior: 0px;

posición:fija!importante;/*FF IE7*/

posición:absoluta;/*IE6*/

_top: expresión(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*/

}

-->

</estilo>

función mostrarDiv(){

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

}

ventana.onload=función(){

mostrarDiv();

}

</script>

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

<title>Siempre en el DIV medio (compatible con IE FF)</title>

</cabeza>

<div id="popDiv" style="display:none;">Siempre en el medio<br/>

</div>

</cuerpo>

</html>