ดัชนี Z

คอมโพเนนต์ Bootstrap หลายตัวใช้z-indexคุณสมบัติ CSS ที่ช่วยควบคุมเลย์เอาต์โดยจัดเตรียมแกนที่สามเพื่อจัดเรียงเนื้อหา เราใช้มาตราส่วนดัชนี z เริ่มต้นใน Bootstrap ที่ได้รับการออกแบบมาเพื่อเลเยอร์การนำทาง คำแนะนำเครื่องมือและป๊อปโอเวอร์ โมดอล และอื่นๆ อย่างเหมาะสม

ค่าที่สูงกว่าเหล่านี้เริ่มต้นที่ตัวเลขโดยพลการ สูงและเฉพาะเจาะจงมากพอที่จะหลีกเลี่ยงความขัดแย้งในอุดมคติ เราต้องการชุดมาตรฐานของสิ่งเหล่านี้ในองค์ประกอบที่เป็นเลเยอร์ของเรา ไม่ว่าจะเป็นคำแนะนำเครื่องมือ ป๊อปโอเวอร์ แถบนำทาง ดรอปดาวน์ โมดอล ดังนั้นเราจึงสามารถแสดงพฤติกรรมที่สอดคล้องกันได้อย่างสมเหตุสมผล ไม่มีเหตุผลใดที่เราจะใช้100+ หรือ500+ ไม่ได้

เราไม่สนับสนุนการปรับแต่งค่าส่วนบุคคลเหล่านี้ หากคุณเปลี่ยนอย่างใดอย่างหนึ่ง คุณอาจต้องเปลี่ยนทั้งหมด

$zindex-dropdown:                   1000;
$zindex-sticky:                     1020;
$zindex-fixed:                      1030;
$zindex-offcanvas-backdrop:         1040;
$zindex-offcanvas:                  1045;
$zindex-modal-backdrop:             1050;
$zindex-modal:                      1055;
$zindex-popover:                    1070;
$zindex-tooltip:                    1080;
$zindex-toast:                      1090;

ในการจัดการกับเส้นขอบที่ทับซ้อนกันภายในส่วนประกอบต่างๆ (เช่น ปุ่มและอินพุตในกลุ่มอินพุต) เราใช้z-indexค่าตัวเลขหลักเดียวต่ำของ1, 2, และ3สำหรับสถานะเริ่มต้น โฮเวอร์ และสถานะที่ใช้งานอยู่ เมื่อวางเมาส์เหนือ/โฟกัส/แอ็คทีฟ เรานำองค์ประกอบเฉพาะมาไว้แถวหน้าด้วยz-indexค่าที่สูงกว่าเพื่อแสดงเส้นขอบขององค์ประกอบที่อยู่เหนือองค์ประกอบระดับเดียวกัน