Z-ئیندێکس

چەندین پێکهاتەی Bootstrap z-index, تایبەتمەندی CSS کە یارمەتی کۆنترۆڵکردنی نەخشە دەدات بە دابینکردنی میحوەرێکی سێیەم بۆ ڕێکخستنی ناوەڕۆک بەکاردەهێنن. ئێمە پێوەرێکی z-indexی پێشوەختە لە Bootstrap بەکاردەهێنین کە دیزاین کراوە بۆ ئەوەی بە شێوەیەکی دروست چینکردنی گەشتکردن، ئامرازەکان و پۆپۆڤەرەکان، مۆداڵەکان و زۆر شتی تر.

ئەم بەها بەرزانە لە ژمارەیەکی ئارەزوومەندانە دەست پێدەکەن، ئەوەندە بەرز و تایبەتن کە بە شێوەیەکی ئایدیاڵ دوور بکەونەوە لە ململانێ. ئێمە پێویستمان بە کۆمەڵەیەکی ستانداردی ئەمانە لە سەرانسەری پێکهاتە چیندارەکانماندا- ئامۆژگاری ئامرازەکان، پۆپۆڤەرەکان، ناوبارەکان، دابەزینەکان، مۆداڵەکان- بۆ ئەوەی بتوانین بە شێوەیەکی گونجاو لە ڕەفتارەکاندا یەکدەنگ بین. هیچ هۆکارێک نییە کە نەماندەتوانی 100+ یان 500+ بەکاربهێنین.

ئێمە هانی خۆکارکردنی ئەم بەها تاکەکەسیانە نادەین؛ ئەگەر یەکێکیان بگۆڕیت، پێدەچێت پێویستت بە گۆڕینی هەموویان بێت.

$zindex-dropdown:                   1000;
$zindex-sticky:                     1020;
$zindex-fixed:                      1030;
$zindex-modal-backdrop:             1040;
$zindex-offcanvas:                  1050;
$zindex-modal:                      1060;
$zindex-popover:                    1070;
$zindex-tooltip:                    1080;

بۆ مامەڵەکردن لەگەڵ سنوورە سەریەککەوتووەکان لەناو پێکهاتەکاندا (بۆ نموونە، دوگمە و زانیارییەکانی ناوەوە لە گروپەکانی چوونەژوورەوە)، ئێمە z-indexبەها تاکە ژمارەی نزمەکانی 1, 2, و 3بۆ باری پێشوەختە، هۆڤەر و چالاک بەکاردەهێنین. لەسەر hover/focus/active، ئێمە توخمێکی تایبەت دەهێنینە پێشەوە بە z-indexبەهایەکی بەرزتر بۆ نیشاندانی سنوورەکەیان بەسەر توخمە خوشک و براکاندا.