สรุป 4 วิธีในการสร้างเลเยอร์ลอย div การย้ายแถบเลื่อน และตำแหน่งยังคงไม่เปลี่ยนแปลง

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-03-03 19:48:02

div ยังคงอยู่ที่ด้านบนและแถบเลื่อนจะเลื่อน แต่ div ยังคงอยู่ที่ด้านบน! อัปโหลดซอร์สโค้ดโดยตรง:

วิธีที่หนึ่ง:

คัดลอกรหัสรหัสดังต่อไปนี้:

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

<หัว>

<title>เลเยอร์ลอย div แถบเลื่อนเลื่อน ทำให้ตำแหน่งไม่เปลี่ยนแปลง</title>

ร่างกาย {พื้นหลังภาพ: url (เกี่ยวกับ: ว่าง); พื้นหลังสิ่งที่แนบมา: แก้ไข;}

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

</สไตล์>

</หัว>

<ร่างกาย>

</ร่างกาย>

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

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

ในขณะที่(Y){H+=Y.offsetTop;Y=Y.offsetParent};

ถ้า(IE6)

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

window.onscroll=ฟังก์ชั่น (){

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

ถ้า(s>H&&IO.fix||s<=H&&!IO.fix)กลับมา;

ถ้า(!IE6)IO.style.position=IO.fix?":: "คงที่";

IO.แก้ไข=!IO.แก้ไข;

ลอง {document.execCommand("BackgroundImageCache",false,true)}catch(e){};

</สคริปต์>

</html>

วิธีที่สอง:

คัดลอกรหัสรหัสดังต่อไปนี้:

<div>

</div>

ชั้นตรงกลาง

<แข็งแกร่ง> </div>

</ร่างกาย></แข็งแกร่ง>

วิธีที่สาม:

คัดลอกรหัสรหัสดังต่อไปนี้:

ชั้นตรงกลาง

</div>

</ร่างกาย>

วิธีที่ 4: [ใช้ CSS เพื่อจัดกึ่งกลาง]

คัดลอกรหัสรหัสดังต่อไปนี้:

html,เนื้อหา {ความสูง:100%; ขนาดตัวอักษร:12px;}

.mydiv {

สีพื้นหลัง: #f9fff6;

เส้นขอบ: 1px ทึบ #009900;

การจัดแนวข้อความ: กึ่งกลาง;

ความสูงของบรรทัด: 25px;

ขนาดตัวอักษร: 13px;

น้ำหนักตัวอักษร: ตัวหนา;

ดัชนี z:99;

ความกว้าง: 300px;

ความสูง: 50px;

ซ้าย:50%;/*FF IE7*/

บนสุด:50%;/*FF IE7*/

ขอบซ้าย:-150px!important;/*FF IE7 ครึ่งหนึ่งของความกว้าง */

Margin-top:-60px!important;/*FF IE7 ครึ่งหนึ่งของความสูง*/

ขอบด้านบน: 0px;

ตำแหน่ง:คงที่!สำคัญ;/*FF IE7*/

ตำแหน่ง:สัมบูรณ์;/*IE6*/

_top: การแสดงออก (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*/

</สไตล์>

ฟังก์ชั่น showDiv(){

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

window.onload=ฟังก์ชั่น(){

showDiv();

</สคริปต์>

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

<หัว>

<title>อยู่ตรงกลาง DIV เสมอ (รองรับ IE FF)</title>

</หัว>

<ร่างกาย>

<div id="popDiv" style="display:none;">อยู่ตรงกลางเสมอ<br/>

</div>

</ร่างกาย>

</html>