Z-indeks
Meskipun bukan bagian dari sistem grid Bootstrap, indeks-z memainkan peran penting dalam bagaimana komponen kita saling melapisi dan berinteraksi satu sama lain.
Beberapa komponen Bootstrap menggunakan z-index, properti CSS yang membantu mengontrol tata letak dengan menyediakan sumbu ketiga untuk mengatur konten. Kami menggunakan skala indeks-z default di Bootstrap yang telah dirancang untuk melapisi navigasi dengan benar, tooltips dan popovers, modals, dan banyak lagi.
Nilai-nilai yang lebih tinggi ini dimulai dari angka yang berubah-ubah, tinggi dan cukup spesifik untuk menghindari konflik secara ideal. Kami membutuhkan satu set standar ini di seluruh komponen berlapis kami — tooltips, popovers, navbars, dropdown, modals — sehingga kami dapat cukup konsisten dalam perilaku. Tidak ada alasan kami tidak bisa menggunakan 100+ atau 500+.
Kami tidak menganjurkan penyesuaian nilai individual ini; jika Anda mengubah satu, Anda mungkin perlu mengubah semuanya.
$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;
Untuk menangani batas yang tumpang tindih dalam komponen (misalnya, tombol dan input dalam grup input), kami menggunakan z-indexnilai satu digit rendah dari 1, 2, dan 3untuk status default, arahkan kursor, dan status aktif. Saat mengarahkan/fokus/aktif, kami membawa elemen tertentu ke garis depan dengan nilai yang lebih tinggi z-indexuntuk menunjukkan batasnya di atas elemen saudara.