Үндсэн агуулга руу шилжих Docs навигаци руу алгасах
Check
in English

Z индекс

Хэдийгээр Bootstrap-ийн сүлжээний системийн нэг хэсэг биш ч z-индексүүд нь бидний бүрэлдэхүүн хэсгүүд хоорондоо хэрхэн давхцаж, харилцан үйлчлэхэд чухал үүрэг гүйцэтгэдэг.

Хэд хэдэн Bootstrap бүрэлдэхүүн хэсгүүд нь z-indexагуулгыг зохицуулах гуравдагч тэнхлэгээр хангаснаар зохион байгуулалтыг удирдахад тусалдаг CSS шинж чанарыг ашигладаг. Бид Bootstrap-д навигаци, хэрэгслийн зөвлөмж, поповер, модаль гэх мэтийг зөв давхаргаар тохируулах зориулалттай анхдагч z-индекс масштабыг ашигладаг.

Эдгээр өндөр утгууд нь зөрчилдөөнөөс зайлсхийхэд хангалттай өндөр бөгөөд тодорхой тооноос эхэлдэг. Бидэнд эдгээрийн стандарт иж бүрдэл нь манай давхаргын бүрэлдэхүүн хэсгүүд болох хэрэгслийн зөвлөмж, поповер, навигац, унадаг цэс, модаль байх шаардлагатай бөгөөд ингэснээр бид зан төлөвт нийцтэй байж чадна. 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өгөгдмөл , хулганаа аваач, идэвхтэй төлөвт ашигладаг. Зогсоох/фокус/идэвхтэй үед бид ах дүү элементүүдийн хилийг харуулахын тулд илүү өндөр утгатай тодорхой элементийг тэргүүн эгнээнд авчирдаг .123z-index