Z-endeksi
Bootstrap'in ızgara sisteminin bir parçası olmasa da, z-endeksleri, bileşenlerimizin birbiriyle nasıl örtüştüğü ve etkileşime girdiği konusunda önemli bir rol oynar.
Birkaç Bootstrap bileşeni z-index, içeriği düzenlemek için üçüncü bir eksen sağlayarak düzeni kontrol etmeye yardımcı olan CSS özelliğini kullanır. Bootstrap'ta gezinmeyi, araç ipuçlarını ve açılır öğeleri, modları ve daha fazlasını düzgün bir şekilde katmanlamak için tasarlanmış varsayılan bir z-endeksi ölçeğini kullanıyoruz.
Bu daha yüksek değerler, ideal olarak çakışmaları önlemek için yeterince yüksek ve spesifik, rastgele bir sayıda başlar. Katmanlı bileşenlerimizde (araç ipuçları, açılır öğeler, gezinme çubukları, açılır menüler, modlar) bunlardan oluşan standart bir kümeye ihtiyacımız var, böylece davranışlarda makul ölçüde tutarlı olabiliriz. 100+ veya + kullanmamamız için hiçbir neden yok 500.
Bu bireysel değerlerin özelleştirilmesini teşvik etmiyoruz; birini değiştirmeniz gerekiyorsa, muhtemelen hepsini değiştirmeniz gerekir.
$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;
Bileşenler (örneğin, giriş gruplarındaki düğmeler ve girişler) içindeki çakışan sınırları işlemek için , , ve varsayılan, vurgulu ve etkin durumlar için düşük tek basamaklı z-indexdeğerler kullanırız. Fareyle üzerine gelindiğinde/odak/etkin olduğunda , kardeş öğeler üzerindeki sınırlarını göstermek için belirli bir öğeyi daha yüksek bir değerle ön plana çıkarırız.123z-index