เมื่อคุณออกแบบเลย์เอาต์ด้วย CSS คุณมักจะวางตำแหน่งองค์ประกอบขึ้น/ลง หรือซ้าย/ขวา z-index ทำให้เราสามารถย้ายองค์ประกอบในมิติที่ 3 บนแกน Z พร้อมเอฟเฟกต์การซ้อน (ซ้อนทับกัน)
z-index คุณสมบัติใช้ auto คีย์เวิร์ดหรือจำนวนเต็ม นี่เป็นการประกาศที่ถูกต้องทั้งหมด:
z-index:auto;z-index:-1;z-index:9999;
หมายเหตุ :เพื่อให้ดัชนี z ใช้ เราจำเป็นต้องจัดตำแหน่งองค์ประกอบด้วย โดยใช้ position ทรัพย์สินไม่ว่าจะเป็นแบบสัมพัทธ์ แบบสัมบูรณ์ หรือแบบตายตัว หากไม่มีการระบุตำแหน่ง จะเหมือนกับการใช้ z-index: auto และจะไม่มีการใช้บริบทการซ้อน
ลองมาดูตัวอย่างกัน
มาวางตำแหน่งหนูตะเภากันเถอะ
คุณสามารถตรวจสอบตัวอย่างนี้ได้ที่ Codepen ลองเล่นและเขียนโค้ดกับฉันสิ!
เราจะวางหนูตะเภาสองตัวหรือ Cuys (ซึ่งฟังดูน่ารักกว่า) สมมติว่าเราอยู่ในฤดูร้อน ข้างนอก 90+ องศา Cuy#1 จะถูกวางไว้ในทะเลสาบ เธอจะมีความสุข Cuy#2 ขี้เกียจมาก เลยต้องหากาแฟให้เขาปลุก! ดังนั้นเราจะเอา Cuy#2 มาซ้อนกับกาแฟเพื่อให้เขาดื่มได้
หากไม่มีการวางตำแหน่งหรือ CSS รูปภาพของเราจะมีหน้าตาแบบนี้ไม่มากก็น้อย:
แนวคิดคือการสร้างบริบทการซ้อนโดยใช้ดัชนี z เพื่อวางภาพบางภาพไว้บนทะเลสาบและกาแฟ
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
นอกจากนี้ จำไว้ว่าเราต้องเพิ่มตำแหน่งให้กับองค์ประกอบของเราเพื่อให้ดัชนี z มีผลใช้ ไปข้างหน้าและวางตำแหน่ง Cuy#1 ของเรา:
img.cuy.one { ตำแหน่ง:สัมบูรณ์;} เพื่อนเราอยู่ไหน ไปข้างหน้าและเพิ่มบริบทการซ้อนที่สูงขึ้นเพื่อให้อยู่ด้านบนของทะเลสาบ:
<ก่อนหน้า>img.cuy.one { ตำแหน่ง:สัมบูรณ์; ดัชนี z:1;}เย้! Cuy ของเราอยู่ด้านบนของทะเลสาบ ตอนนี้เราจำเป็นต้องเพิ่มช่องว่างภายในเพื่อวางไว้ในทะเลสาบ แต่ฉันจะปล่อยให้คุณเล่นด้วย
ตอนนี้เรารู้วิธีสร้างบริบทการซ้อนโดยใช้ z-index , เราสามารถวางสัตว์ตัวที่สองของเราได้ง่ายมาก:
ช่องว่างภายในอีกครั้งจะเป็นการวางตำแหน่งที่แน่นอนของรูปภาพ และความกว้างใช้เพื่อระบุขนาดของเพื่อนตัวน้อยของเราเท่านั้น เท่านี้เราก็เสร็จสิ้นภารกิจแล้ว ทุกคนก็มีความสุขและรู้สึกสดชื่น:
บทสรุป
เล่นกับ z-index ทำให้เกิดแนวคิดการจัดวางที่น่าสนใจ ใน Codepen ฉันได้ให้ตัวอย่างที่สองของการออกแบบป๊อปแชทที่มีตำแหน่งและมีดัชนี z อยู่เหนือทุกสิ่ง ลองดูสิ!
อย่าลืม ที่คุณต้องวางตำแหน่งองค์ประกอบเสมอ มิฉะนั้น z-index ของคุณจะไม่ทำงาน ลองเล่น Codepen โดยเอาตำแหน่งออกและดูด้วยตัวคุณเอง
คำแนะนำอีกประการหนึ่งคือ คุณต้องใช้ดัชนี z กับองค์ประกอบพี่น้อง ในตัวอย่างของเรา รูปภาพของเราไม่ได้ซ้อนกันและเป็นพี่น้องกัน (เคียงข้างกัน) หากคุณมีองค์ประกอบที่ซ้อนกันอย่างลึกซึ้ง z-index อาจไม่ทำงานตามที่คาดไว้ . โปรดจำไว้เสมอ
