คุณสมบัติ CSS ส่วนใหญ่ใช้งานง่าย บ่อยครั้ง เมื่อคุณใช้คุณสมบัติ CSS กับองค์ประกอบของภาษามาร์กอัป ผลลัพธ์จะปรากฏขึ้นทันทีเมื่อคุณรีเฟรชเพจ คุณสมบัติ CSS อื่นๆ นั้นซับซ้อนกว่าและจะทำงานภายใต้สถานการณ์ที่กำหนดเท่านั้น
แอตทริบิวต์ดัชนี Z เป็นของกลุ่มหลังที่กล่าวถึงข้างต้น ไม่ต้องสงสัยเลยว่าดัชนี Z ทำให้เกิดความสับสน (ความเข้ากันได้) และความหงุดหงิด (จิตวิทยาของนักพัฒนา) บ่อยกว่าคุณลักษณะอื่นๆ แต่ที่น่าตลกก็คือ เมื่อคุณเข้าใจดัชนี Z จริงๆ แล้ว คุณจะพบว่ามันเป็นคุณสมบัติที่ใช้งานง่ายมาก และจะให้ความช่วยเหลือที่ทรงพลังในการแก้ปัญหาความท้าทายด้านเลย์เอาต์ต่างๆ
ในบทความนี้ เราจะอธิบายอย่างชัดเจนว่าดัชนี Z คืออะไร เหตุใดจึงเข้าใจได้ไม่ดีนัก และหารือเกี่ยวกับประเด็นในทางปฏิบัติบางประการที่เกี่ยวข้องกับการใช้งาน นอกจากนี้เรายังจะอธิบายความแตกต่างระหว่างเบราว์เซอร์ต่อเบราว์เซอร์ที่คุณจะพบ ซึ่งเป็นปัญหาเฉพาะที่มีอยู่ใน IE และ Firefox เวอร์ชันที่มีอยู่ มุมมองที่ครอบคลุมเกี่ยวกับแอตทริบิวต์ Z-index นี้จะช่วยให้นักพัฒนามีรากฐานที่ดีของความมั่นใจและความช่วยเหลือที่มีประสิทธิภาพเมื่อใช้แอตทริบิวต์ Z-index
นี่อะไรน่ะ?
แอตทริบิวต์ดัชนี Z กำหนดระดับการซ้อนขององค์ประกอบ HTML ระดับการเรียงซ้อนขององค์ประกอบจะสัมพันธ์กับตำแหน่งขององค์ประกอบบนแกน Z (ตรงข้ามกับแกน X หรือแกน Y) ค่าดัชนี Z ที่สูงขึ้นหมายความว่าองค์ประกอบจะอยู่ใกล้กับด้านบนมากขึ้นในลำดับการเรียงซ้อน ลำดับชั้นนี้จะแสดงตามแกนเกลียวแนวตั้ง
เพื่อให้เห็นภาพที่ชัดเจนยิ่งขึ้นเกี่ยวกับวิธีการทำงานของดัชนี Z รูปภาพด้านบนแสดงตำแหน่งที่มองเห็นได้ขององค์ประกอบแบบเรียงซ้อนเกินจริง
ลำดับชั้นตามธรรมชาติ
ในหน้า HTML ลำดับการเรียงซ้อนตามธรรมชาติ (นั่นคือ ลำดับขององค์ประกอบบนแกน Z) จะถูกกำหนดโดยปัจจัยหลายประการ ต่อไปนี้เป็นรายการซึ่งแสดงรายการในบริบทแบบเรียงซ้อน (ยังไม่พบคำแปลภาษาจีนที่เหมาะสม ควรอ้างอิงถึงสภาพแวดล้อมการเรียงซ้อนที่มีองค์ประกอบแบบเรียงซ้อนอยู่) รายการเหล่านี้อยู่ในบริบทการเรียงซ้อนนี้ ของสิ่งแวดล้อม ไม่มีรายการใดในรายการนี้ที่ได้รับการกำหนดแอตทริบิวต์ดัชนี Z
พื้นหลังและเส้นขอบขององค์ประกอบสร้างบริบทแบบเรียงซ้อน
อ้าง:
·องค์ประกอบบริบทแบบซ้อนที่มีค่าลบจะถูกจัดเรียงตามลำดับที่ปรากฏ (ยิ่งระดับหลังยิ่งสูง)
·องค์ประกอบระดับบล็อกที่ไม่ได้จัดตำแหน่งหรือลอยอยู่จะถูกจัดเรียงตามลำดับที่ปรากฏ
·องค์ประกอบลอยที่ไม่ได้จัดตำแหน่งจะถูกจัดเรียงตามลำดับที่ปรากฏ
·องค์ประกอบอินไลน์จะจัดเรียงตามลำดับที่ปรากฏ
·องค์ประกอบที่อยู่ในตำแหน่งจะจัดเรียงตามลำดับที่ปรากฏ
เมื่อใช้คุณสมบัติดัชนี Z อย่างถูกต้อง จะเปลี่ยนลำดับการเรียงซ้อนตามธรรมชาติ
แน่นอนว่าลำดับการเรียงซ้อนขององค์ประกอบจะไม่ชัดเจนเป็นพิเศษ เว้นแต่ว่าองค์ประกอบเหล่านั้นจะถูกวางให้ทับซ้อนกัน ด้านล่าง จะแสดงกล่องที่มีระยะขอบเป็นลบเพื่อแสดงลำดับการเรียงซ้อนตามธรรมชาติ
กล่องด้านบนถูกกำหนดด้วยสีพื้นหลังและเส้นขอบที่แตกต่างกัน และสองกล่องหลังนั้นถูกเซและกำหนดระยะขอบด้านบนที่เป็นลบ เพื่อให้เราสามารถเห็นลำดับการเรียงซ้อนตามธรรมชาติ กล่องสีเทาอยู่ในตำแหน่งแรกในเครื่องหมาย กล่องสีน้ำเงินอยู่ในตำแหน่งที่สอง และกล่องสีทองอยู่ในตำแหน่งที่สาม อัตรากำไรขั้นต้นติดลบที่ใช้แสดงให้เห็นอย่างชัดเจนถึงความจริงที่ว่าองค์ประกอบเหล่านี้ไม่มีชุดคุณสมบัติดัชนี Z; ลำดับการเรียงซ้อนเป็นไปตามธรรมชาติหรือเป็นค่าเริ่มต้นคือกฎแบบผสม ปรากฏการณ์อินเทอร์เลซเกิดจากระยะขอบติดลบ