วางซ้อนทับองค์ประกอบด้วย Cascading Style Sheets
หนึ่งในความท้าทายเมื่อใช้การวางตำแหน่ง 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 อื่น ตัวอย่างเช่นถ้าฉันมีองค์ประกอบที่แตกต่างกันห้าอย่าง:
- องค์ประกอบ 1 - z-index ของ -25
- องค์ประกอบ 2 - z-index จาก 82
- ไม่ได้กำหนดองค์ประกอบ 3 - z-index
- องค์ประกอบ 4 - z-index จาก 10
- องค์ประกอบ 5 - z-index ของ -3
พวกเขาจะกองในลำดับต่อไปนี้:
- องค์ประกอบ 2
- องค์ประกอบ 4
- องค์ประกอบ 3
- องค์ประกอบ 5
- องค์ประกอบ 1
ขอแนะนำให้ใช้ค่า z-index ที่แตกต่างกันอย่างมากมายในการจัดเรียงองค์ประกอบของคุณ ด้วยวิธีนี้หากคุณเพิ่มองค์ประกอบอื่น ๆ ลงในเพจในภายหลังคุณสามารถวางชั้นไว้ได้โดยไม่ต้องปรับค่าดัชนี z ขององค์ประกอบอื่น ๆ ทั้งหมด ตัวอย่างเช่น:
- 100 สำหรับองค์ประกอบด้านบนสุดของฉัน
- 0 สำหรับองค์ประกอบส่วนกลางของฉัน
- -100 สำหรับองค์ประกอบด้านล่างของฉัน
นอกจากนี้คุณยังสามารถให้สององค์ประกอบค่าดัชนีเดียวกัน z หากองค์ประกอบเหล่านี้ถูกจัดเรียงซ้อนกันจะปรากฏตามลำดับที่เขียนใน HTML โดยมีองค์ประกอบสุดท้ายอยู่ด้านบน
หนึ่งโน้ตสำหรับองค์ประกอบที่จะใช้คุณสมบัติ z-index อย่างมีประสิทธิภาพต้องเป็นองค์ประกอบระดับบล็อกหรือใช้การบล็อก "หรือ" บล็อกแบบอินไลน์ "ในไฟล์ CSS ของคุณ
บทความต้นฉบับโดย Jennifer Krynin แก้ไขเมื่อ 12/09/16 โดย Jeremy Girard