[เบราว์เซอร์ที่เข้าร่วมในการทดสอบ: IE6/IE7/IE8/FF3/OP9.6/SF3/Chrome2] ดูเหมือนว่านักเรียนหลายคนสับสนว่าทำไม DIV นี้จึงอยู่ในระดับสูงและ DIV นั้นอยู่ในระดับที่ต่ำกว่า ทำให้คุณไม่ได้ใช้การซ้อนทับของเลเยอร์ที่ต้องการ อย่างไรก็ตามเอฟเฟกต์การซ้อนทับของเลเยอร์ปรากฏขึ้นบ่อยครั้งในการออกแบบแบบโต้ตอบดังนั้นเราต้องควบคุมมัน ก่อนอื่นให้ชี้แจงแนวคิดบางอย่างที่จำเป็นต้องใช้ในบทความ : ตำแหน่งคงที่: ตำแหน่ง: คงที่ (ค่าเริ่มต้นของคุณสมบัติตำแหน่ง) การวางตำแหน่งแบบไดนามิก: ตำแหน่ง: สัมพัทธ์หรือตำแหน่ง: สัมบูรณ์หรือตำแหน่ง: คงที่ องค์ประกอบบรรพบุรุษ: องค์ประกอบใด ๆ ที่มีองค์ประกอบ องค์ประกอบหลัก: องค์ประกอบบรรพบุรุษที่มีองค์ประกอบโดยตรง องค์ประกอบเพียร์: องค์ประกอบที่มีองค์ประกอบหลักทั่วไป หมายเหตุ: แนวคิดเหล่านี้ถูกปรับแต่งโดยผู้แต่งและใช้ในบทความนี้เท่านั้น อ้าง: องค์ประกอบของเพื่อนเป็นคำที่สำคัญมากและจำเป็นต้องอธิบายอย่างละเอียดที่นี่ <div> ในตัวอย่างนี้ Div#A และ Div#B ไม่ใช่ "องค์ประกอบพร้อมกัน" เท่านั้น สิ้นสุดคำพูด มาดูกฎทั้งห้านี้ : กฎข้อที่ 1: เมื่อวิธีการวางตำแหน่งขององค์ประกอบเพียร์เหมือนกันและไม่มีการตั้งค่า z-index HTML ขึ้นอยู่กับหลัง รันกล่องรหัส กฎข้อที่ 2: เมื่อองค์ประกอบเดียวกันอยู่ในตำแหน่งแบบไดนามิกและมีการตั้งค่าดัชนี Z ซึ่งเป็นค่า z-index ที่ใหญ่ที่สุดคือด้านบน รันกล่องรหัส กฎข้อ 3: วิธีการวางตำแหน่งขององค์ประกอบเพียร์นั้นแตกต่างกันและการวางตำแหน่งแบบไดนามิกเป็นสิ่งสำคัญที่สุด รันกล่องรหัส กฎข้อที่ 4: เมื่อองค์ประกอบที่ไม่เกิดขึ้นพร้อมกันองค์ประกอบใด ๆ และองค์ประกอบบรรพบุรุษของพวกเขาไม่มีเค้าโครงแบบไดนามิก HTML ขึ้นอยู่กับหลัง รันกล่องรหัส กฎข้อที่ 5 : [สำคัญ] เมื่อองค์ประกอบใด ๆ ที่ไม่ได้เกิดขึ้นมีการวางตำแหน่งแบบไดนามิกแต่ละตัวจะมองหาองค์ประกอบของบรรพบุรุษที่มีพลวัตการวางตำแหน่งขึ้นไปและแต่ละองค์ประกอบจะนำองค์ประกอบบรรพบุรุษระดับสูงสุด (หรือตัวเอง) มาเปรียบเทียบ . กรณีที่ 1: ไม่ว่าดัชนี Z ขององค์ประกอบลูกจะใหญ่แค่ไหน กรณีที่ 2: องค์ประกอบหลักต่ำกว่าและองค์ประกอบลูกก็สามารถสูงขึ้นได้ กรณีที่ 1, กรณีที่ 2 รวมกับการเปรียบเทียบเพิ่มเติม รันกล่องรหัส อ้าง: ในความเป็นจริงสี่คะแนนแรกเป็นพื้นฐานทั้งหมดและมีเพียงจุดที่ห้าเท่านั้นที่เข้าใจได้ยาก <div id = "ab" style = "ตำแหน่ง: สัมบูรณ์;"> ในตัวอย่างนี้ลองเปรียบเทียบความสัมพันธ์แบบเรียงซ้อนระหว่าง Div#A_INNER5 และ DIV#B_INNER4 เมื่อองค์ประกอบหลักต่ำกว่าและองค์ประกอบของเด็กก็สามารถสูงขึ้นได้ก็เป็นเพราะเมื่อองค์ประกอบที่ไม่ใช่ Peer ถูกใช้เพื่อจัดวางองค์ประกอบของบรรพบุรุษแบบไดนามิกการเปรียบเทียบของมันไม่มีส่วนเกี่ยวข้องกับตำแหน่ง: คงที่ แต่องค์ประกอบของบรรพบุรุษ เปรียบเทียบผ่านตำแหน่ง HTML สิ้นสุดคำพูด แน่นอนว่าบางครั้งมีกรณีพิเศษเช่นแฟลชและเลือกใน IE6 ที่ไม่สามารถบล็อกได้
[ระบบปฏิบัติการ: Windows]
<div> </div>
<div id = "a"> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
<div id = "f">
<div> </div>
<div id = "b"> </div>
<div id = "c"> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
[Ctrl+A เคล็ดลับการเลือกทั้งหมด: คุณสามารถแก้ไขรหัสบางอย่างก่อน]
[Ctrl+A เคล็ดลับการเลือกทั้งหมด: คุณสามารถแก้ไขรหัสบางอย่างก่อน]
[Ctrl+A เคล็ดลับการเลือกทั้งหมด: คุณสามารถแก้ไขรหัสบางอย่างก่อน]
[Ctrl+A เคล็ดลับการเลือกทั้งหมด: คุณสามารถแก้ไขรหัสบางอย่างก่อน]
[Ctrl+A เคล็ดลับการเลือกทั้งหมด: คุณสามารถแก้ไขรหัสบางอย่างก่อน]
<div id = "a" style = "ตำแหน่ง: ญาติ; z-index: 100;">
<div id = "a_inner1">
<div id = "a_inner2">
<div id = "a_inner3" style = "ตำแหน่ง: ญาติ; z-index: 98;">
<div id = "a_inner4">
<div id = "a_inner5">
</div>
</div>
</div>
</div>
</div>
</div>
<div id = "b">
<div id = "b_inner1">
<div id = "b_inner2">
<div id = "b_inner3" style = "ตำแหน่ง: ญาติ; z-index: 99;">
<div id = "b_inner4">
</div>
</div>
</div>
</div>
</div>
</div>
จนกระทั่งระดับต่อไปขององค์ประกอบบรรพบุรุษ Div#AB องค์ประกอบบรรพบุรุษของ Div#A_INNER5 รวมถึง: Div#A, Div#A_INNER1, DIV#A_INNER2, Div#A_INNER3, Div#A_INNER4; div#b, div#b_inner1, div#b_inner2, div#b_inner3
จากนั้นวิเคราะห์องค์ประกอบบรรพบุรุษของพวกเขาที่มีการวางตำแหน่งแบบไดนามิก: องค์ประกอบบรรพบุรุษของ Div#A_INNER5 ที่มีการวางตำแหน่งแบบไดนามิกคือ: Div#A, Div#A_INNER3;
จากนั้นนำระดับสูงสุดเพื่อเปรียบเทียบ: div#a>#div#b_inner3