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