Z-індэкс
Нягледзячы на тое, што z-індэксы не ўваходзяць у сеткавую сістэму Bootstrap, яны гуляюць важную ролю ў тым, як нашы кампаненты накладваюцца і ўзаемадзейнічаюць адзін з адным.
Некалькі кампанентаў 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;
Для апрацоўкі межаў кампанентаў, якія перакрываюцца (напрыклад, кнопак і ўводаў у групах уводу), мы выкарыстоўваем малыя адназначныя z-index
значэнні 1
, 2
, і 3
для станаў па змаўчанні, навядзення і актыўных станаў. Пры навядзенні/факусіроўцы/актыўнасці мы вылучаем пэўны элемент на першы план з больш высокім z-index
значэннем, каб паказаць яго мяжу над роднаснымі элементамі.