ઝેડ-ઇન્ડેક્સ

કેટલાક બુટસ્ટ્રેપ ઘટકો ઉપયોગ કરે z-indexછે , CSS પ્રોપર્ટી કે જે સામગ્રીને ગોઠવવા માટે ત્રીજી અક્ષ પ્રદાન કરીને લેઆઉટને નિયંત્રિત કરવામાં મદદ કરે છે. અમે બુટસ્ટ્રેપમાં ડિફૉલ્ટ z-ઇન્ડેક્સ સ્કેલનો ઉપયોગ કરીએ છીએ જે યોગ્ય રીતે નેવિગેશન, ટૂલટિપ્સ અને પોપોવર્સ, મોડલ્સ અને વધુને સ્તર આપવા માટે ડિઝાઇન કરવામાં આવી છે.

આ ઉચ્ચ મૂલ્યો એક મનસ્વી સંખ્યાથી શરૂ થાય છે, આદર્શ રીતે તકરારને ટાળવા માટે પૂરતી ઊંચી અને ચોક્કસ. અમને અમારા સ્તરીય ઘટકોમાં આના પ્રમાણભૂત સમૂહની જરૂર છે - ટૂલટિપ્સ, પોપોવર્સ, નેવબાર્સ, ડ્રોપડાઉન્સ, મોડલ્સ-જેથી અમે વર્તણૂકોમાં વ્યાજબી રીતે સુસંગત રહી શકીએ. 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મૂલ્યોનો ઉપયોગ કરીએ છીએ. હોવર/ફોકસ/સક્રિય પર, અમે ભાઈ-બહેન તત્વો પર તેમની સરહદ બતાવવા માટે ઉચ્ચ મૂલ્ય સાથે કોઈ ચોક્કસ ઘટકને મોખરે લાવીએ છીએ .123z-index