เมื่อพูดถึงเรื่อง layer ใน css แล้ว หนึ่งในเรื่อง ที่ไว้ใช้จัดการเรื่องการซ้อนทับคงหนีไม่พ้นเรื่องการใช้ z-index ซึ่งในบทความนี้ จะมาอธิบายให้ฟังกันแบบคร่าวๆครับ

Z-index คืออะไรหรอ นิ?

ทุกท่านคนคุ้นเคยกับตำแหน่ง แกน X และแกน Y มาแล้วใช่ไหม อ้าาา นั่นหละ Z ที่กล่าวมาตรงนี้คือแกนที่ พุ่งเข้าหาตัวเรา ยิ่ง ค่าของ z-index เป็นบวกจะเป็นการซ้อนอยู่ชั้นบนๆแต่ถ้าค่าของ z-index เป็นลบก็จะเป็นการซ้อนอยู่ชั้นล่างๆ

โดยค่า default ของ z-index ตามปกติแล้วจะเป็น auto

ใช้งานยังไงหว่า ?

เจ้า z-index เนี้ยไม่ใช่ว่าจะใส่ให้กับ element อะไรก็ได้นะ element ที่สามารถใช้ z-index ได้ต้องมีการกำหนด position ตัวใดตัวหนึ่ง ดังนี้

position: relative || absolute || fixed || sticky ;
z-index:auto || number

มาทำความเข้าใจกันซะ

อันนี้คือสร้าง parent a ม่วงและ parent b สีเขียวมาตามปกติ ก็ยังไม่มีอะไรเกิดขึ้น

หลังจากลองปรับใช้ position:relative ให้กับ parent ทั้งสอง แล้วก็เลื่อน parent b มาข้างบนแต่ตอนนี้ยังไม่ได้กำหนด z-index อ้าว !!! ในเมื่อไม่ได้กำหนด z-index ให้กับ parent b แล้ว parent b มันทับ parent a ได้ยังไง ….

เราไม่ได้กำหนด z-index ให้มันใช่ไหมค่าเริ่มต้นของมันก็เลยเป็น z-index:auto

z-index:auto คือ element

มาก่อนstackอยู่ล่าง มาทีหลังstackอยู่บน

งั้นลองใส่ z-index : 0 ให้กับ parent a และ parent b หน่อยซิ้

ก็จะได้เหมือนเดิม เพราะ เมื่อไรก็ตาม z-index มีค่าเท่ากัน element ที่มาทีหลังก็จะอยู่ด้านบนอีกทีหนึ่ง ลองเปลี่ยนให้ parent a มี z-index:1; ก็จะได้แบบนี้

เพราะ z-index:1 มันมากกว่า z-index:0 ทำให้อันนี้ parent a สีม่วง มาซ้อนทับอยู่ด้านบนของ parent b สีเขียว

เรื่องชวนสับสน

ดังรูป

(parenat a สีม่วง) (pareant b สีเขียว) (item a สีแดง)

parent a มี z-index = 0 และ ภายใน parent a มี item a ที่มี z-index:1
parent b มี z-index = 0

ว่าแต่ทำไม item a มันไม่ซ้อนทับ parent b หละทั้งๆที่มันมี z-index มากกว่านะ

เพราะเมื่อใดที่เราใส่ค่า z-index ที่ไม่ใช้ auto ลงไป มันจะทำการสรา้ง stacking context

ทำให้ parent a และ parent b สร้าง stacking context ของตัวเองขึ้นมา ไม่ว่าอย่างไรก็ตาม itemใน parent a ต่อให้ z-index เยอะแค่ไหนก็จะไม่ซ้อนทับ parent b เพราะมันอยู่กันคนละ stacking context

ทำให้ item a ที่มี z-index:999 ก็จะซ้อนอยู่จุดที่ 999 ใน stacking context ของ parent a ดังนั้นหาก ภายใน parent a มี item อื่นๆอีกมันก็จะซ้อนกันเองภายใน stacking context ของมัน

สับสนอีกสักหน่อยเป็นไรไป

ดังรูป

parent a ไม่มี z-index ทำให้ z-index = auto
และ ภายใน parent a มี item a ที่มี z-index:1
parent b ไม่มี z-index ทำให้ z-index = auto

อันนี้แบบไม่ใส่ z-index เราก็จะได้ z-index auto มันต่างกันตรงที่ z-index :auto
จะ ไม่สรา้ง stacking context นี่หละ ต่อให้ parent b มาทีหลังสามารถที่จะซ้อนทับ parent a ได้ แต่ item a ที่มี z-index:1 กลายเป็น item ที่มี stacking context ทำให้มันซ้อนได้ทุกอย่างที่ไม่มี stacking content

บทความนี้ไม่ได้บอกว่าจะเอาไปใช้ยังไงนะครับแค่บอกว่ามันทำงานอย่างไร ส่วนวิธีการ
ประยุกต์ใช้เพื่อนๆก็ลองไปลองปรับใช้กันดูนะครับ

ลองฝึกทำแล้วอาจจะเข้าใจมากยึ่งขึ้นนะครับสู้ๆ นะทุกๆคน

สรุป

z-index คือตัวกำหนดจัดการ การซ้อนทับของlayout ในแกน z แค่นั้นหละ
แต่ที่เสริมๆมายาวๆนั้นถ้าหากเข้าใจด้วยก็ดีเพราะบางทีการที่เรารู้เรื่องพวกนี้ไว้สามารถช่วยพลิกแพลงหรือแก้ปัญหาเกี่ยวกับเรื่องเรื่องที่เราอาจจะเจอเมื่อต้องทำ css ก็เป็นได้

ขอขอบคุณข้อมูลจาก:
https://medium.com/@danusoncheounsanguan/css-z-index-9a7e0037141