ปัญหาใหญ่ที่สุดเมื่อใช้เลเยอร์ในหน้ากึ่งกลางคือตำแหน่งของเลเยอร์ เมื่อความละเอียดในการแสดงผลเปลี่ยนไป ตำแหน่งของเลเยอร์ที่สัมพันธ์กับองค์ประกอบที่อยู่กึ่งกลางอื่นๆ จะเปลี่ยนไป บทความนี้จะแนะนำวิธีป้องกันไม่ให้เลเยอร์ไม่ตรงแนวเมื่อเทียบกับองค์ประกอบอื่นๆ ที่อยู่ตรงกลาง
ตำแหน่งที่แน่นอนและตำแหน่งสัมพัทธ์
ของเลเยอร์ รหัสตำแหน่งที่แน่นอนสำหรับเลเยอร์:
<div id="Layer1" style="position:absolute; left:45px; top:25px; width:400px; height:155px; z-index:1"> </div>
รหัสตำแหน่งสัมพัทธ์ของเลเยอร์:
<div id="Layer1" style="position:relative; left:45px; top:25px; width:400px; height:155px; z-index:1"></div>
ในหน้ากึ่งกลาง ให้แทรกโค้ดเลเยอร์การวางตำแหน่งสัมพัทธ์ และตำแหน่งของเลเยอร์จะอยู่ตรงกลางหน้า แต่กลายเป็นเรื่องเคลื่อนย้ายไม่ได้และใช้งานไม่สะดวก
แทรกโค้ดการกำหนดตำแหน่งแบบสัมบูรณ์ เมื่อด้านซ้ายและด้านบนมีค่าบวกและค่าลบ เลเยอร์จะไม่สามารถอยู่ตรงกลางได้ เมื่อล้างแอตทริบิวต์ด้านซ้ายและด้านบนแล้ว เลเยอร์สามารถอยู่ตรงกลางได้ และไม่มีการวางแนวที่ไม่ตรงเมื่อเทียบกับองค์ประกอบอื่นๆ ที่อยู่ตรงกลางบนหน้า
ความแตกต่างระหว่างเลเยอร์การวาดและเลเยอร์การแทรก
การใช้เลเยอร์การวาด:
ในหน้าที่กึ่งกลาง ให้ใช้โค้ดที่แสดงเลเยอร์:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>div</title>
</หัว>
<ร่างกาย>
<div id="Layer1" style="position:absolute; left:40px; top:30px; width:265px; height:75px; z-index:1"></div>
<div align="center"></div>
</ร่างกาย>
</html>
ใช้ชั้นแทรก:
ในหน้าที่กึ่งกลาง ให้ใช้โค้ดเลเยอร์แทรก:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>div2</title>
</หัว>
<ร่างกาย>
<div align="center">
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1"></div>
</div>
</ร่างกาย>
</html>
เนื่องจากโค้ดที่สร้างโดยใช้ "เลเยอร์การวาด" ไม่ได้รวมอยู่ในโค้ดที่อยู่ตรงกลาง เพื่อให้แน่ใจว่าเลเยอร์จะไม่วางแนวไม่ตรงเมื่อเทียบกับองค์ประกอบอื่น ๆ ในหน้าที่อยู่กึ่งกลาง จึงต้องใช้เลเยอร์การแทรก
ในหน้าที่จัดกึ่งกลาง โดยทั่วไปจะใช้สองวิธีเพื่อให้แน่ใจว่าเลเยอร์ไม่มีการจัดแนวที่ไม่ตรงเมื่อเทียบกับองค์ประกอบอื่นๆ ที่อยู่ตรงกลาง
การใช้เลเยอร์การแทรก
1. ในหน้ากึ่งกลาง ให้วางจุดแทรกในเอกสาร ในตัวอย่าง ให้วางจุดแทรกในตาราง
2. เลือกเมนู "แทรก"/"เลเยอร์"
3.มีการแทรกเลเยอร์ลงในเอกสาร ในตัวอย่าง มีการแทรกเลเยอร์ลงในตาราง เมื่อทดสอบในเบราว์เซอร์ IE และความละเอียดมีการเปลี่ยนแปลง เนื้อหาของเลเยอร์จะไม่ถูกจัดแนวไม่ตรงเมื่อเทียบกับองค์ประกอบที่อยู่ตรงกลางอื่นๆ
ตรวจสอบคุณสมบัติของเลเยอร์นี้ในแผงคุณสมบัติ เลเยอร์ที่แทรกนี้จะล้างค่า "ซ้าย" และ "บนสุด"
วิธีนี้มักใช้เพื่อสร้างเมนูป๊อปอัป
การใช้เลเยอร์ที่ซ้อนกัน
เลเยอร์ที่ซ้อนกันคือเลเยอร์ที่มีโค้ดอยู่ภายในอีกเลเยอร์หนึ่ง
ก่อนที่จะใช้เลเยอร์ที่ซ้อนกัน คุณต้องตั้งค่าพารามิเตอร์บางอย่างสำหรับเลเยอร์ก่อน เลือกเมนู "แก้ไข"/"การตั้งค่า" และในกล่องโต้ตอบ "การตั้งค่า" เลือก "ความเข้ากันได้ของ Netscape 4: ขนาดคงที่เมื่อแทรกเลเยอร์" เพื่อให้เลเยอร์ที่ซ้อนกันที่สร้างขึ้นสามารถเข้ากันได้กับเบราว์เซอร์ Netscape 4 และทำเครื่องหมายที่ "การซ้อน: ใช้การซ้อนหากอยู่ในเลเยอร์"
เปิดแผงเลเยอร์และยกเลิกการเลือก "ป้องกันการทับซ้อนกัน"
เลเยอร์ที่ซ้อนกัน:
แทรกตารางในหน้ากึ่งกลาง และแทรกเลเยอร์ในตารางจะไม่วางแนวไม่ตรงเมื่อเทียบกับตาราง ในเลเยอร์นี้ ให้ใช้คำสั่ง "Insert"/"Layer" เพื่อแทรกเลเยอร์ย่อย (เลเยอร์ที่ซ้อนกัน) ไม่ว่าคุณจะย้ายเลเยอร์ย่อยนี้บนหน้าด้วยวิธีใดก็ตาม ตำแหน่งของเลเยอร์ย่อยจะไม่ถูกแทนที่โดยสัมพันธ์กับองค์ประกอบที่อยู่ตรงกลางอื่นๆ
ในเลเยอร์ที่แทรก คุณสามารถแทรกเลเยอร์ที่ซ้อนกันได้หลายเลเยอร์ จากนั้นย้ายเลเยอร์ที่ซ้อนกันไปยังตำแหน่งที่ต้องการ เพื่อให้คุณสามารถใช้เลเยอร์ต่างๆ ในหน้าตรงกลางได้ตามต้องการ
สรุป: จัดกึ่งกลางหน้า สร้างเมนูป๊อปอัป ใช้คำสั่ง Insert/Layer ใช้เค้าโครงเลเยอร์และวางเนื้อหาในเลเยอร์ ใช้เลเยอร์ที่ซ้อนกัน