Resumo de 4 métodos para fazer com que a camada flutuante div, o movimento da barra de rolagem e a posição permaneçam inalterados

Autor：Eve Cole Data da Última Atualização：2025-03-03 19:48:02

A div permanece no topo e a barra de rolagem rola, mas a div ainda está no topo! Faça upload do código-fonte diretamente:

Método um:

Copie o código do código da seguinte forma:

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

<cabeça>

<title>camada flutuante div, barra de rolagem se move, mantendo a posição inalterada</title>

corpo{imagem de fundo:url(sobre:em branco);anexo de fundo:fixo;}

#float{largura:344px;altura:34px;borda:1px sólido #C0DBF8;posição:absoluta;topo:0px;}

</estilo>

</head>

<corpo>

</body>

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

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

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

se(IE6)

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

window.onscroll=função(){

var d=documento,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?"":"fixado";

IO.fix=!IO.fix;

};

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

</script>

</html>

Método dois:

Copie o código do código da seguinte forma:

<div>

</div>

Camada centralizada

</body></STRONG>

Método três:

Copie o código do código da seguinte forma:

Camada centralizada

</div>

</body>

Método 4: [Use CSS para centralizar]

Copie o código do código da seguinte forma:

<!--

html,corpo {altura:100%;margem:0px;tamanho da fonte:12px;}

.meudiv {

cor de fundo: #f9fff6;

borda: 1px sólido #009900;

alinhamento de texto: centro;

altura da linha: 25px;

tamanho da fonte: 13px;

peso da fonte: negrito;

índice z:99;

largura: 300px;

altura: 50px;

esquerda:50%;/*FF IE7*/

topo:50%;/*FF IE7*/

margin-left:-150px!important;/*FF IE7 metade de sua largura */

margin-top:-60px!important;/*FF IE7 metade de sua altura*/

margem superior:0px;

posição:fixo!importante;/*FF IE7*/

posição:absoluta;/*IE6*/

_top: expressão(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>

função mostrarDiv(){

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

}

janela.onload=função(){

mostrarDiv();

}

</script>

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

<cabeça>

<title>Sempre no meio DIV (suporta IE FF)</title>

</head>

<corpo>

<div id="popDiv" style="display:none;">Sempre no meio<br/>

</div>

</body>

</html>