សន្ទស្សន៍ Z
ទោះបីជាមិនមែនជាផ្នែកនៃប្រព័ន្ធក្រឡាចត្រង្គរបស់ Bootstrap ក៏ដោយ Z-indexes ដើរតួយ៉ាងសំខាន់ក្នុងរបៀបដែលសមាសធាតុរបស់យើងត្រួតលើគ្នា និងធ្វើអន្តរកម្មជាមួយគ្នាទៅវិញទៅមក។
សមាសធាតុ Bootstrap ជាច្រើនប្រើប្រាស់ z-index
CSS property ដែលជួយគ្រប់គ្រងប្លង់ដោយផ្តល់អ័ក្សទីបីដើម្បីរៀបចំមាតិកា។ យើងប្រើប្រាស់មាត្រដ្ឋាន z-index លំនាំដើមនៅក្នុង 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;
$zindex-toast: 1090;
ដើម្បីដោះស្រាយព្រំដែនត្រួតគ្នានៅក្នុងសមាសធាតុ (ឧ. ប៊ូតុង និងធាតុបញ្ចូលក្នុងក្រុមបញ្ចូល) យើងប្រើតម្លៃលេខមួយខ្ទង់ទាប z-index
នៃ 1
, 2
, និង 3
សម្រាប់លំនាំដើម សង្កត់លើ និងស្ថានភាពសកម្ម។ នៅលើ hover/focus/active, យើងនាំយកធាតុជាក់លាក់មួយទៅជួរមុខជាមួយនឹង z-index
តម្លៃខ្ពស់ជាងដើម្បីបង្ហាញព្រំដែនរបស់ពួកគេនៅលើធាតុបងប្អូនបង្កើត។