Z-ಸೂಚ್ಯಂಕ
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ನ ಭಾಗವಾಗಿಲ್ಲದಿದ್ದರೂ, ನಮ್ಮ ಘಟಕಗಳು ಹೇಗೆ ಒವರ್ಲೇ ಮತ್ತು ಪರಸ್ಪರ ಸಂವಹನ ನಡೆಸುತ್ತವೆ ಎಂಬುದರಲ್ಲಿ z-ಸೂಚ್ಯಂಕಗಳು ಪ್ರಮುಖ ಪಾತ್ರವಹಿಸುತ್ತವೆ.
ಹಲವಾರು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಘಟಕಗಳು ಬಳಸುತ್ತವೆ 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
ಮೌಲ್ಯಗಳನ್ನು ಬಳಸುತ್ತೇವೆ. ಹೋವರ್/ಫೋಕಸ್/ಆಕ್ಟಿವ್ನಲ್ಲಿ , ಸಹೋದರ ಅಂಶಗಳ ಮೇಲೆ ಅವುಗಳ ಗಡಿಯನ್ನು ತೋರಿಸಲು ನಾವು ಹೆಚ್ಚಿನ ಮೌಲ್ಯದೊಂದಿಗೆ ನಿರ್ದಿಷ್ಟ ಅಂಶವನ್ನು ಮುಂಚೂಣಿಗೆ ತರುತ್ತೇವೆ .1
2
3
z-index