หนึ่งในความท้าทายเมื่อใช้การวางตำแหน่ง CSS สำหรับการจัดวางหน้าเว็บคือองค์ประกอบบางส่วนของคุณอาจทับซ้อนกับคนอื่น ๆ นี้ทำงานได้ดีถ้าคุณต้องการองค์ประกอบสุดท้ายใน HTML ที่จะอยู่ด้านบน แต่สิ่งที่ถ้าคุณไม่ได้หรือสิ่งที่ถ้าคุณต้องการมีองค์ประกอบที่ไม่ซ้ำซ้อนในปัจจุบันคนอื่นจะทำเช่นนั้นเพราะการออกแบบสายนี้ดู "ชั้น" ? เพื่อที่จะเปลี่ยนองค์ประกอบที่ทับซ้อนกันคุณต้องใช้คุณสมบัติของ CSS
หากคุณเคยใช้เครื่องมือกราฟิกใน Word และ PowerPoint หรือโปรแกรมแก้ไขภาพที่มีประสิทธิภาพมากขึ้นเช่น Adobe Photoshop แล้วคุณจะเห็นบางอย่างเช่น z-index ในการดำเนินการ ในโปรแกรมเหล่านี้คุณสามารถเน้นวัตถุที่คุณวาดและเลือกตัวเลือกเพื่อ "ส่งกลับ" หรือ "นำไปข้างหน้า" องค์ประกอบบางอย่างของเอกสารของคุณ ใน Photoshop คุณไม่มีฟังก์ชันเหล่านี้ แต่คุณมีบานหน้าต่าง "Layer" ของโปรแกรมและคุณสามารถจัดเรียงตำแหน่งที่องค์ประกอบใด ๆ ตกบนผืนผ้าใบได้โดยการจัดเรียงชั้นใหม่เหล่านี้ ในตัวอย่างทั้งสองแบบนี้คุณจะกำหนด z-index ของวัตถุเหล่านั้นเป็นหลัก
Z-Index คืออะไร?
เมื่อคุณใช้การจัดตำแหน่ง CSS เพื่อวางองค์ประกอบบนหน้าเว็บคุณต้องคิดในสามมิติ มีสองมิติมาตรฐานคือซ้าย / ขวาและบน / ล่าง ดัชนีจากซ้ายไปขวาเรียกว่าดัชนี x ในขณะที่ดัชนีจากด้านบนถึงด้านล่างเป็นดัชนี y นี่คือตำแหน่งที่คุณจะวางองค์ประกอบในแนวนอนหรือแนวตั้งโดยใช้ดัชนีทั้งสองนี้
เมื่อกล่าวถึงการออกแบบเว็บแล้วยังมีคำสั่งซ้อนของหน้า องค์ประกอบแต่ละส่วนของหน้าสามารถจัดวางไว้ด้านบนหรือด้านล่างองค์ประกอบอื่น ๆ คุณสมบัติ z-index จะกำหนดตำแหน่งในสแต็คแต่ละอิลิเมนต์คือ ถ้าดัชนี x และ y-index เป็นเส้นแนวนอนและแนวตั้งดัชนี z คือความลึกของหน้าซึ่งเป็นมิติที่ 3
ลองนึกถึงองค์ประกอบต่างๆบนเว็บเพจเป็นชิ้นส่วนของกระดาษและหน้าเว็บเป็นภาพตัดปะ ตำแหน่งที่คุณวางกระดาษจะถูกกำหนดโดยการวางตำแหน่งและส่วนที่ปกคลุมด้วยองค์ประกอบอื่น ๆ คือดัชนี z
- ดัชนี z เป็นตัวเลขซึ่งเป็นค่าบวก (เช่น 100) หรือค่าลบ (เช่น -100)
- ดัชนี z เริ่มต้นคือ 0
องค์ประกอบที่มีดัชนี z มากที่สุดอยู่ด้านบนตามด้วยอันดับถัดไปที่สูงที่สุดและลดลงไปที่ z-index ต่ำสุด หากองค์ประกอบทั้งสองมีค่าดัชนี z เดียวกัน (หรือไม่ได้กำหนดไว้ซึ่งหมายถึงการใช้ค่าเริ่มต้นเป็น 0) เบราว์เซอร์จะจัดเรียงลำดับตามลำดับที่ปรากฏใน HTML
วิธีใช้ Z-Index
ให้แต่ละองค์ประกอบที่คุณต้องการในสแตกค่า z-index อื่น ตัวอย่างเช่นถ้าคุณมีองค์ประกอบที่แตกต่างกันห้าประการ:
- องค์ประกอบ A - z-index ของ -25
- องค์ประกอบ B - z-index จาก 82
- ไม่ได้ตั้งค่า C - z-index
- องค์ประกอบ D - z - ดัชนีของ 10
- องค์ประกอบ E - z-index ของ -3
พวกเขาจะกองในลำดับต่อไปนี้:
- องค์ประกอบ B
- องค์ประกอบ D
- องค์ประกอบ C
- องค์ประกอบ E
- องค์ประกอบ A
ขอแนะนำให้ใช้ค่า z-index ที่แตกต่างกันอย่างมากในการจัดเรียงองค์ประกอบของคุณ ด้วยวิธีนี้หากคุณเพิ่มองค์ประกอบอื่น ๆ ลงในเพจในภายหลังคุณสามารถวางชั้นไว้ได้โดยไม่ต้องปรับค่าดัชนี z ขององค์ประกอบอื่น ๆ ทั้งหมด ตัวอย่างเช่น:
- 100 สำหรับองค์ประกอบด้านบนสุดของคุณ
- 0 สำหรับองค์ประกอบระดับกลางของคุณ
- -100 สำหรับองค์ประกอบด้านล่าง
นอกจากนี้คุณยังสามารถให้สององค์ประกอบค่าดัชนีเดียวกัน z หากองค์ประกอบเหล่านี้ถูกจัดเรียงซ้อนกันจะปรากฏตามลำดับที่เขียนใน HTML โดยมีองค์ประกอบสุดท้ายอยู่ด้านบน
หนึ่งโน้ต: สำหรับองค์ประกอบที่จะใช้คุณสมบัติ z-index อย่างมีประสิทธิภาพต้องเป็นองค์ประกอบระดับบล็อกหรือใช้การแสดงผลของ "block" หรือ "inline-block" ในไฟล์ CSS ของคุณ
