[เบราว์เซอร์ที่เข้าร่วมการทดสอบ: IE6/IE7/IE8/FF3/OP9.6/SF3/Chrome2]
[ระบบปฏิบัติการ: วินโดวส์]
ดูเหมือนว่านักเรียนหลายคนหมกมุ่นอยู่กับปัญหาว่าทำไม div นี้จึงอยู่ที่ชั้นบนและ div นั้นอยู่ที่ชั้นล่าง และไม่ว่าพวกเขาจะตั้งค่าดัชนี z อย่างไร พวกเขาก็ไม่สามารถอยู่ด้านบนได้ ท้องร่วง คลื่นไส้ นอนไม่หลับ และจบลงด้วยอาการซึมเศร้าจึงไม่กล้าใช้เลเยอร์โอเวอร์เลย์ตามใจชอบ อย่างไรก็ตาม เอฟเฟกต์การซ้อนทับของเลเยอร์ปรากฏขึ้นบ่อยครั้งในการออกแบบปฏิสัมพันธ์ ดังนั้นเราต้องควบคุมมัน เพื่อควบคุมมัน เราจะต้องเชี่ยวชาญกฎของมัน
ขั้นแรก ชี้แจงแนวคิดบางประการที่จำเป็นต้องใช้ในบทความ:
1. การวางตำแหน่งแบบคงที่: ตำแหน่ง: คงที่ (ค่าเริ่มต้นของแอตทริบิวต์ตำแหน่ง)
2. การวางตำแหน่งแบบไดนามิก: ตำแหน่ง: สัมพันธ์หรือตำแหน่ง: สัมบูรณ์หรือตำแหน่ง: คงที่
3. องค์ประกอบบรรพบุรุษ: องค์ประกอบใดๆ ที่มีองค์ประกอบนี้
4. องค์ประกอบหลัก: องค์ประกอบบรรพบุรุษที่มีองค์ประกอบโดยตรง
5. องค์ประกอบพี่น้อง: องค์ประกอบที่มีองค์ประกอบหลักร่วมกัน
[หมายเหตุ] แนวคิดเหล่านี้ปรับแต่งโดยผู้เขียนและใช้ในบทความนี้เท่านั้น
องค์ประกอบเพียร์เป็นคำสำคัญมากและจำเป็นต้องอธิบายโดยละเอียดที่นี่
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: <div> <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="ค"></div> <div></div> <div></div> <div></div> </div> |
ในตัวอย่างนี้ div#a และ div#b ไม่ใช่ "องค์ประกอบพี่น้อง" เฉพาะองค์ประกอบเช่น div#b และ div#c ที่มีพาเรนต์ div#f เดียวกันเท่านั้นที่สามารถเรียกว่า "องค์ประกอบพี่น้อง"