Ringkasan 4 metode untuk membuat lapisan div mengambang, bilah gulir bergerak dan posisinya tetap tidak berubah

Penulis：Eve Cole Waktu Pembaruan：2025-03-03 19:48:02

Div tetap berada di atas dan bilah gulir bergulir, tetapi div tetap berada di atas! Unggah kode sumber secara langsung:

Metode satu:

Copy kode kodenya sebagai berikut:

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

<title>div lapisan mengambang, bilah gulir bergerak, menjaga posisi tidak berubah</title>

body{gambar-latar belakang:url(tentang:kosong);lampiran-latar belakang:diperbaiki;}

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

</gaya>

</kepala>

<tubuh>

</tubuh>

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

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

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

jika (IE6)

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

jendela.onscroll=fungsi (){

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

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

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

IO.fix=!IO.fix;

};

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

</skrip>

</html>

Metode dua:

Copy kode kodenya sebagai berikut:

<div>

</div>

Lapisan tengah

</tubuh>

Metode ketiga:

Copy kode kodenya sebagai berikut:

Lapisan tengah

</div>

</tubuh>

Metode 4: [Gunakan css untuk memusatkan]

Copy kode kodenya sebagai berikut:

<!--

html,badan {tinggi:100%; margin:0px;

.div saya {

warna latar belakang: #f9fff6;

batas: 1 piksel padat #009900;

perataan teks: tengah;

tinggi garis: 25px;

ukuran font: 13px;

berat font: tebal;

indeks-z:99;

lebar: 300 piksel;

tinggi: 50 piksel;

kiri:50%;/*FF IE7*/

atas:50%;/*FF IE7*/

margin-left:-150px!important;/*FF IE7 setengah lebarnya */

margin-top:-60px!important;/*FF IE7 setengah dari tingginya*/

margin-atas:0px;

posisi: tetap!penting;/*FF IE7*/

posisi: mutlak;/*IE6*/

_top: ekspresi(eval(document.compatMode &&

dokumen.compatMode=='CSS1Compat') ?

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

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

}

-->

</gaya>

fungsi tampilkanDiv(){

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

}

jendela.onload=fungsi(){

showDiv();

}

</skrip>

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

<title>Selalu di tengah DIV (mendukung IE FF)</title>

</kepala>

<tubuh>

<div id="popDiv" style="display:none;">Selalu di tengah

</div>

</tubuh>

</html>