เลเยอร์บนสุดจะอยู่เหนือ 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 ของ 10,000 กับ position: fixed
.swal-overlay {
z-index: 10000;
position: fixed;
}
คุณไม่จำเป็นต้องใช้รูปแบบใดๆ กับ <dialog> เพื่อให้ปรากฏเหนือเนื้อหาอื่นๆ ทั้งหมด
DevTools
ซึ่งนำมาสู่การสนับสนุนเครื่องมือสำหรับนักพัฒนาเว็บ Chrome DevTools กำลังเพิ่มการรองรับองค์ประกอบของเลเยอร์บนสุดเพื่อให้คุณสามารถตรวจสอบเลเยอร์บนสุดได้ วิธีนี้จะช่วยให้แก้ไขข้อบกพร่องและแสดงภาพสิ่งที่ซ้อนอยู่ในเลเยอร์บนสุดหรือสิ่งที่อยู่ในเลเยอร์บนสุดได้ง่ายขึ้น
Alina Varkki มีบทความดีๆ ที่จะให้ข้อมูลเชิงลึกเกี่ยวกับการใช้เครื่องมือเหล่านี้ ขณะนี้ฟีเจอร์ดังกล่าวพร้อมใช้งานเป็นฟีเจอร์ตัวอย่างใน Chrome Canary เวอร์ชัน 105
เท่านี้ก็เรียบร้อย
ข้อมูลเบื้องต้นเกี่ยวกับเลเยอร์ด้านบน ทำให้สามารถพูดว่า "บ๊ายบาย" กับเรื่องต่างๆ ได้ เช่น
.popup-container {
z-index: 10000;
}
คุณจะดันอะไรเข้าไปในเลเยอร์บนสุด คุณได้ลองใช้ dialog แล้วหรือยัง หรือลองใช้ OpenUI Popover API โปรดแจ้งให้เราทราบ