เลเยอร์บนสุดจะอยู่เหนือ document ที่เกี่ยวข้องในวิวพอร์ตของเบราว์เซอร์ และ document แต่ละรายการจะมีเลเยอร์บนสุดที่เชื่อมโยงกัน 1 รายการ ซึ่งหมายความว่าองค์ประกอบที่โปรโมตเป็นเลเยอร์บนสุดไม่จำเป็นต้องกังวลเกี่ยวกับ z-index หรือลำดับชั้น DOM นอกจากนี้ ยังมีองค์ประกอบจำลอง ::backdrop ที่เจ๋งสุดๆ ให้ใช้งานด้วย ข้อกำหนดของ Fullscreen API จะอธิบายรายละเอียดเพิ่มเติม เนื่องจาก Fullscreen เป็นตัวอย่างที่ยอดเยี่ยมของเลเยอร์บนสุดที่ใช้อยู่ก่อนที่จะมีการรองรับ dialog
เลเยอร์ด้านบนช่วยแก้ปัญหาการแสดงผลเนื้อหาเหนือdocumentส่วนที่เหลือ
สิ่งสำคัญที่ควรจำไว้มีดังนี้
- เลเยอร์ด้านบนอยู่นอกโฟลว์ document
- z-index ไม่มีผลต่อเลเยอร์ด้านบน
- องค์ประกอบแต่ละรายการในเลเยอร์บนสุดมีองค์ประกอบจำลอง ::backdrop ที่ปรับแต่งสไตล์ได้
- องค์ประกอบและ ::backdrop แต่ละรายการจะสร้างบริบทการซ้อนใหม่
- องค์ประกอบในเลเยอร์บนสุดจะซ้อนกันตามลำดับที่ปรากฏในชุด รายการล่าสุดจะปรากฏที่ด้านบน หากคุณต้องการโปรโมตองค์ประกอบ ให้นำองค์ประกอบนั้นออกแล้วเพิ่มอีกครั้ง
ก่อนหน้านี้เราจำลองเลเยอร์ด้านบนอย่างไร เป็นเรื่องปกติที่นักพัฒนาแอปจะวางองค์ประกอบคอนเทนเนอร์ว่างไว้ที่ท้าย body จากนั้นข้อมูลนี้จะถูกใช้เป็น
เลเยอร์ด้านบน "ของก๊อป" แนวคิดคือคอนเทนเนอร์นี้จะอยู่เหนือคอนเทนเนอร์อื่นๆ ทั้งหมดในกอง เมื่อต้องการโปรโมตรายการใดรายการหนึ่งเหนือรายการอื่นๆ ให้เพิ่มรายการนั้นต่อท้ายคอนเทนเนอร์นั้น เราเห็นสิ่งนี้ในแพ็กเกจยอดนิยมอย่าง SweetAlert, reactjs-popup, Magnific Popup และอื่นๆ
เมื่อใช้คอมโพเนนต์และ API ในตัวใหม่ เช่น <dialog> และ "Popover" คุณจะไม่จําเป็นต้องใช้วิธีแก้ปัญหาเหล่านี้ คุณสามารถโปรโมตเนื้อหาไปยังเลเยอร์บนสุดได้
เฟรมเวิร์ก UI ช่วยให้เราค้นหาองค์ประกอบที่โปรโมตร่วมกับองค์ประกอบที่โปรโมตได้ แต่มักถูกแยกออกจาก DOM เมื่อต้องแสดงผล
เมื่อใช้เลเยอร์บนสุด องค์ประกอบที่เลื่อนระดับจะอยู่ที่ตำแหน่งที่คุณวางไว้ในซอร์สโค้ด (เช่น <dialog>) ไม่ว่าองค์ประกอบนั้นจะอยู่ใน DOM กี่เลเยอร์ก็ตาม องค์ประกอบดังกล่าวจะได้รับการเลื่อนระดับไปยังเลเยอร์บนสุด และคุณสามารถตรวจสอบองค์ประกอบดังกล่าวได้ในตำแหน่งที่คุณต้องการ ซึ่งอยู่ร่วมกับ HTML ของคอมโพเนนต์ ซึ่งจะช่วยให้ตรวจสอบทั้งองค์ประกอบทริกเกอร์และองค์ประกอบที่โปรโมตใน DOM ได้พร้อมกันได้ง่ายขึ้น ซึ่งมีประโยชน์อย่างยิ่งในกรณีที่องค์ประกอบทริกเกอร์ทําการอัปเดตแอตทริบิวต์ ซึ่งยังมีประโยชน์เพิ่มเติมสำหรับการช่วยเหลือพิเศษด้วยเนื่องจากองค์ประกอบอยู่ร่วมกัน
ลองดูการสาธิตนี้เพื่อแสดงให้เห็นภาพเลเยอร์ด้านบนเทียบกับ z-index ที่สูง
ในการแสดงตัวอย่างนี้ คุณสามารถเปิดป๊อปอัป SweetAlert และเปิดเลเยอร์ด้านบน <dialog> ได้ด้วย เปิด <dialog> แล้วลองเปิดป๊อปอัป SweetAlert คุณจะเห็นว่ารูปภาพปรากฏใต้องค์ประกอบเลเยอร์บนสุดของเรา และรูทของป๊อปอัป SweetAlert ใช้ z-index 10000 ที่มี position: fixed
.swal-overlay {
z-index: 10000;
position: fixed;
}
คุณไม่จำเป็นต้องใช้รูปแบบใดๆ กับ <dialog> เพื่อให้ปรากฏเหนือเนื้อหาอื่นๆ
เครื่องมือสำหรับนักพัฒนาเว็บ
และเรามาพูดถึงการสนับสนุนเกี่ยวกับเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์กัน เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome กำลังเพิ่มการรองรับองค์ประกอบเลเยอร์บนสุดเพื่อให้คุณตรวจสอบเลเยอร์บนสุดได้ วิธีนี้ช่วยให้แก้ไขข้อบกพร่องและเห็นภาพว่าองค์ประกอบต่างๆ ซ้อนกันอย่างไรในเลเยอร์บนสุด หรือมีอะไรอยู่ในเลเยอร์บนสุด
Alina Varkki มีบทความดีๆ ที่จะเจาะลึกเกี่ยวกับการใช้เครื่องมือเหล่านี้ ปัจจุบันฟีเจอร์ดังกล่าวพร้อมให้ใช้งานเป็นฟีเจอร์เวอร์ชันตัวอย่างใน Chrome Canary เวอร์ชัน 105
เท่านี้ก็เรียบร้อย
ข้อมูลเบื้องต้นสั้นๆ เกี่ยวกับเลเยอร์ด้านบน ทำให้การพูดว่า "ลาก่อน" กับสิ่งต่างๆ ได้ เช่น
.popup-container {
z-index: 10000;
}
คุณจะดันอะไรไปยังเลเยอร์บนสุด คุณได้ลองใช้ dialog แล้วหรือยัง หรือเคยลองใช้ OpenUI Popover API ไหม โปรดแจ้งให้เราทราบ