Z-indeks

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.