ನೀವು ಎಂದಾದರೂ z-ಇಂಡೆಕ್ಸ್: 99999 ಅನ್ನು ನಿಮ್ಮ CSS ನಲ್ಲಿನ ಅಂಶದಲ್ಲಿ ಹೊಂದಿಸಿದ್ದೀರಾ ಮತ್ತು ಅದು ಇತರ ಅಂಶಗಳ ಮೇಲೆ ಬರುವುದಿಲ್ಲವೇ? ಎಲ್ಲಾ ವಿಭಿನ್ನ ಅಂಶಗಳನ್ನು ಕಡಿಮೆ ಮೌಲ್ಯದಲ್ಲಿ ಹೊಂದಿಸಲಾಗಿದೆ ಅಥವಾ ಹೊಂದಿಸಿಲ್ಲ ಎಂದು ಊಹಿಸಿ, ಆ ಅಂಶವನ್ನು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಬೇರೆ ಯಾವುದಾದರೂ ಮೇಲೆ ಇರಿಸಲು ದೊಡ್ಡ ಮೌಲ್ಯ. ವೆಬ್ಪುಟವನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಎರಡು ಆಯಾಮದ ಜಾಗದಲ್ಲಿ ಪ್ರತಿನಿಧಿಸಲಾಗುತ್ತದೆ; ಆದಾಗ್ಯೂ, ನಿರ್ದಿಷ್ಟ CSS ಗುಣಲಕ್ಷಣಗಳನ್ನು ಅನ್ವಯಿಸುವ ಮೂಲಕ, ಆಳವನ್ನು ತಿಳಿಸಲು ಕಾಲ್ಪನಿಕ z-ಆಕ್ಸಿಸ್ ಪ್ಲೇನ್ ಅನ್ನು ಪರಿಚಯಿಸಲಾಗಿದೆ. ಈ ಸಮತಲವು ಪರದೆಗೆ ಲಂಬವಾಗಿರುತ್ತದೆ, ಮತ್ತು ಅದರಿಂದ, ಬಳಕೆದಾರರು ಒಂದರ ಮೇಲೊಂದರಂತೆ ಅಂಶಗಳ ಕ್ರಮವನ್ನು ಗ್ರಹಿಸುತ್ತಾರೆ. ಕಾಲ್ಪನಿಕ z- ಅಕ್ಷದ ಹಿಂದಿನ ಕಲ್ಪನೆ, ಸ್ಟ್ಯಾಕ್ ಮಾಡಲಾದ ಅಂಶಗಳ ಬಳಕೆದಾರರ ಗ್ರಹಿಕೆ, ಅದನ್ನು ರಚಿಸುವ CSS ಗುಣಲಕ್ಷಣಗಳು ನಾವು ಪೇರಿಸುವ ಸಂದರ್ಭ ಎಂದು ಕರೆಯುವದನ್ನು ರೂಪಿಸಲು ಸಂಯೋಜಿಸುತ್ತದೆ. ವೆಬ್ಪುಟದಲ್ಲಿ ಅಂಶಗಳನ್ನು "ಸ್ಟ್ಯಾಕ್" ಮಾಡುವುದು ಹೇಗೆ, ಪೇರಿಸುವ ಕ್ರಮವನ್ನು ಯಾವುದು ನಿಯಂತ್ರಿಸುತ್ತದೆ ಮತ್ತು ಅಗತ್ಯವಿದ್ದಾಗ ಅಂಶಗಳನ್ನು "ಅನ್ಸ್ಟಾಕ್" ಮಾಡುವ ಪ್ರಾಯೋಗಿಕ ವಿಧಾನಗಳ ಕುರಿತು ನಾವು ಮಾತನಾಡಲಿದ್ದೇವೆ. ಸ್ಟ್ಯಾಕಿಂಗ್ ಸನ್ನಿವೇಶಗಳ ಬಗ್ಗೆ ನಿಮ್ಮ ವೆಬ್ಪುಟವನ್ನು ಮೇಜಿನಂತೆ ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ನೀವು HTML ಅಂಶಗಳನ್ನು ಸೇರಿಸಿದಾಗ, ನೀವು ಕಾಗದದ ತುಂಡುಗಳನ್ನು ಒಂದರ ನಂತರ ಒಂದರಂತೆ ಮೇಜಿನ ಮೇಲೆ ಇಡುತ್ತೀರಿ. ಕೊನೆಯದಾಗಿ ಇರಿಸಲಾದ ಕಾಗದದ ತುಂಡು ತೀರಾ ಇತ್ತೀಚೆಗೆ ಸೇರಿಸಲಾದ HTML ಅಂಶಕ್ಕೆ ಸಮನಾಗಿರುತ್ತದೆ ಮತ್ತು ಅದರ ಮುಂದೆ ಇರಿಸಲಾದ ಎಲ್ಲಾ ಇತರ ಪೇಪರ್ಗಳ ಮೇಲೆ ಇರುತ್ತದೆ. ನೆಸ್ಟೆಡ್ ಅಂಶಗಳಿಗೆ ಸಹ ಇದು ಸಾಮಾನ್ಯ ದಾಖಲೆಯ ಹರಿವು. ಡೆಸ್ಕ್ ಸ್ವತಃ ಎಲ್ಲಾ ಇತರ ಫೋಲ್ಡರ್ಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಅಂಶದಿಂದ ರೂಪುಗೊಂಡ ಮೂಲ ಪೇರಿಸುವಿಕೆಯ ಸಂದರ್ಭವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಈಗ, ನಿರ್ದಿಷ್ಟ CSS ಗುಣಲಕ್ಷಣಗಳು ಕಾರ್ಯರೂಪಕ್ಕೆ ಬರುತ್ತವೆ. ಸ್ಥಾನ (z-ಇಂಡೆಕ್ಸ್ನೊಂದಿಗೆ), ಅಪಾರದರ್ಶಕತೆ, ರೂಪಾಂತರ ಮತ್ತು ಒಳಗೊಂಡಿರುವಂತಹ ಗುಣಲಕ್ಷಣಗಳು ಫೋಲ್ಡರ್ನಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ. ಈ ಫೋಲ್ಡರ್ ಒಂದು ಅಂಶ ಮತ್ತು ಅದರ ಎಲ್ಲಾ ಮಕ್ಕಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ, ಅವುಗಳನ್ನು ಮುಖ್ಯ ಸ್ಟಾಕ್ನಿಂದ ಹೊರತೆಗೆಯುತ್ತದೆ ಮತ್ತು ಅವುಗಳನ್ನು ಪ್ರತ್ಯೇಕ ಉಪ-ಸ್ಟಾಕ್ಗೆ ಗುಂಪು ಮಾಡುತ್ತದೆ, ನಾವು ಪೇರಿಸುವ ಸಂದರ್ಭ ಎಂದು ಕರೆಯುವದನ್ನು ರಚಿಸುತ್ತದೆ. ಸ್ಥಾನಿಕ ಅಂಶಗಳಿಗಾಗಿ, ನಾವು ಸ್ವಯಂ ಹೊರತುಪಡಿಸಿ z-ಸೂಚ್ಯಂಕ ಮೌಲ್ಯವನ್ನು ಘೋಷಿಸಿದಾಗ ಇದು ಸಂಭವಿಸುತ್ತದೆ. ಅಪಾರದರ್ಶಕತೆ, ರೂಪಾಂತರ ಮತ್ತು ಫಿಲ್ಟರ್ನಂತಹ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ನಿರ್ದಿಷ್ಟ ಮೌಲ್ಯಗಳನ್ನು ಅನ್ವಯಿಸಿದಾಗ ಪೇರಿಸುವ ಸಂದರ್ಭವನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ರಚಿಸಲಾಗುತ್ತದೆ.
ಇದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಪ್ರಯತ್ನಿಸಿ: ಒಮ್ಮೆ ಕಾಗದದ ತುಂಡು (ಅಂದರೆ, ಮಗುವಿನ ಅಂಶ) ಫೋಲ್ಡರ್ನೊಳಗೆ ಇದ್ದರೆ (ಅಂದರೆ, ಪೋಷಕರ ಪೇರಿಸುವ ಸಂದರ್ಭ), ಅದು ಎಂದಿಗೂ ಆ ಫೋಲ್ಡರ್ನಿಂದ ನಿರ್ಗಮಿಸಲು ಅಥವಾ ಬೇರೆ ಫೋಲ್ಡರ್ನಲ್ಲಿ ಪೇಪರ್ಗಳ ನಡುವೆ ಇರಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ. ಅದರ z-ಸೂಚ್ಯಂಕವು ಈಗ ಅದರ ಸ್ವಂತ ಫೋಲ್ಡರ್ನಲ್ಲಿ ಮಾತ್ರ ಪ್ರಸ್ತುತವಾಗಿದೆ.
ಕೆಳಗಿನ ವಿವರಣೆಯಲ್ಲಿ, ಪೇಪರ್ B ಈಗ ಫೋಲ್ಡರ್ B ಯ ಸ್ಟಾಕಿಂಗ್ ಸನ್ನಿವೇಶದಲ್ಲಿದೆ ಮತ್ತು ಫೋಲ್ಡರ್ನಲ್ಲಿರುವ ಇತರ ಪೇಪರ್ಗಳೊಂದಿಗೆ ಮಾತ್ರ ಆರ್ಡರ್ ಮಾಡಬಹುದು.
ನೀವು ಬಯಸಿದರೆ, ನಿಮ್ಮ ಮೇಜಿನ ಮೇಲೆ ನೀವು ಎರಡು ಫೋಲ್ಡರ್ಗಳನ್ನು ಹೊಂದಿರುವಿರಿ ಎಂದು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ:
.ಫೋಲ್ಡರ್-ಎ {z-ಸೂಚ್ಯಂಕ: 1; } .ಫೋಲ್ಡರ್-ಬಿ {z-ಸೂಚ್ಯಂಕ: 2; }
ಮಾರ್ಕ್ಅಪ್ ಅನ್ನು ಸ್ವಲ್ಪ ನವೀಕರಿಸೋಣ. ಫೋಲ್ಡರ್ ಎ ಒಳಗೆ ವಿಶೇಷ ಪುಟ, z-ಸೂಚ್ಯಂಕ: 9999. ಫೋಲ್ಡರ್ ಬಿ ಒಳಗೆ ಒಂದು ಸರಳ ಪುಟ, z-ಸೂಚ್ಯಂಕ: 5.
.ವಿಶೇಷ ಪುಟ {z-ಸೂಚ್ಯಂಕ: 9999; } ಸರಳ-ಪುಟ {z-ಸೂಚ್ಯಂಕ: 5; }
ಯಾವ ಪುಟವು ಮೇಲ್ಭಾಗದಲ್ಲಿದೆ? ಇದು ಫೋಲ್ಡರ್ B ನಲ್ಲಿ .plain-page ಆಗಿದೆ. ಬ್ರೌಸರ್ ಚೈಲ್ಡ್ ಪೇಪರ್ಗಳನ್ನು ನಿರ್ಲಕ್ಷಿಸುತ್ತದೆ ಮತ್ತು ಮೊದಲು ಎರಡು ಫೋಲ್ಡರ್ಗಳನ್ನು ಸ್ಟ್ಯಾಕ್ ಮಾಡುತ್ತದೆ. ಇದು ಫೋಲ್ಡರ್ ಬಿ (z-ಸೂಚ್ಯಂಕ: 2) ಅನ್ನು ನೋಡುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ಫೋಲ್ಡರ್ A (z-ಸೂಚ್ಯಂಕ: 1) ಮೇಲೆ ಇರಿಸುತ್ತದೆ ಏಕೆಂದರೆ ಎರಡು ಒಂದಕ್ಕಿಂತ ದೊಡ್ಡದಾಗಿದೆ ಎಂದು ನಮಗೆ ತಿಳಿದಿದೆ. ಏತನ್ಮಧ್ಯೆ, .special-page ಅನ್ನು z-index ಗೆ ಹೊಂದಿಸಲಾಗಿದೆ: 9999 ಪುಟವು ಅದರ z-ಸೂಚ್ಯಂಕವನ್ನು ಹೆಚ್ಚಿನ ಸಂಭವನೀಯ ಮೌಲ್ಯಕ್ಕೆ ಹೊಂದಿಸಿದ್ದರೂ ಸಹ ಸ್ಟಾಕ್ನ ಕೆಳಭಾಗದಲ್ಲಿದೆ. ಸ್ಟ್ಯಾಕಿಂಗ್ ಸಂದರ್ಭಗಳನ್ನು ಕೂಡ ನೆಸ್ಟೆಡ್ ಮಾಡಬಹುದು (ಫೋಲ್ಡರ್ಗಳ ಒಳಗೆ ಫೋಲ್ಡರ್ಗಳು), "ಕುಟುಂಬ ಮರ" ವನ್ನು ರಚಿಸಬಹುದು. ಅದೇ ತತ್ವವು ಅನ್ವಯಿಸುತ್ತದೆ: ಮಗು ತನ್ನ ಪೋಷಕರ ಫೋಲ್ಡರ್ನಿಂದ ತಪ್ಪಿಸಿಕೊಳ್ಳಲು ಸಾಧ್ಯವಿಲ್ಲ. ಲೇಯರ್ಗಳನ್ನು ಗುಂಪು ಮಾಡುವ ಮತ್ತು ಮರುಕ್ರಮಗೊಳಿಸುವ ಫೋಲ್ಡರ್ಗಳಂತೆ ಪೇರಿಸುವ ಸಂದರ್ಭಗಳು ಹೇಗೆ ವರ್ತಿಸುತ್ತವೆ ಎಂಬುದನ್ನು ನೀವು ಈಗ ಪಡೆದುಕೊಂಡಿದ್ದೀರಿ, ಇದು ಕೇಳಲು ಯೋಗ್ಯವಾಗಿದೆ: ಕೆಲವು ಗುಣಲಕ್ಷಣಗಳು - ರೂಪಾಂತರ ಮತ್ತು ಅಪಾರದರ್ಶಕತೆ - ಹೊಸ ಪೇರಿಸುವಿಕೆಯ ಸಂದರ್ಭಗಳನ್ನು ಏಕೆ ರಚಿಸುತ್ತವೆ? ಇಲ್ಲಿ ವಿಷಯ ಇಲ್ಲಿದೆ: ಈ ಗುಣಲಕ್ಷಣಗಳು ಹೇಗೆ ಕಾಣುತ್ತವೆ ಎಂಬ ಕಾರಣದಿಂದಾಗಿ ಪೇರಿಸುವ ಸಂದರ್ಭಗಳನ್ನು ರಚಿಸುವುದಿಲ್ಲ; ಹುಡ್ ಅಡಿಯಲ್ಲಿ ಬ್ರೌಸರ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬ ಕಾರಣದಿಂದಾಗಿ ಅವರು ಅದನ್ನು ಮಾಡುತ್ತಾರೆ. ನೀವು ರೂಪಾಂತರ, ಅಪಾರದರ್ಶಕತೆ, ಫಿಲ್ಟರ್ ಅಥವಾ ದೃಷ್ಟಿಕೋನವನ್ನು ಅನ್ವಯಿಸಿದಾಗ, ನೀವು ಬ್ರೌಸರ್ಗೆ ಹೇಳುತ್ತಿದ್ದೀರಿ, "ಹೇ, ಈ ಅಂಶವು ಚಲಿಸಬಹುದು, ತಿರುಗಿಸಬಹುದು ಅಥವಾ ಮಸುಕಾಗಬಹುದು, ಆದ್ದರಿಂದ ಸಿದ್ಧರಾಗಿರಿ!"
ನೀವು ಈ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿದಾಗ, ರೆಂಡರಿಂಗ್ ಅನ್ನು ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ನಿರ್ವಹಿಸಲು ಬ್ರೌಸರ್ ಹೊಸ ಪೇರಿಸುವಿಕೆಯ ಸಂದರ್ಭವನ್ನು ರಚಿಸುತ್ತದೆ. ಇದು ಅನಿಮೇಷನ್ಗಳು, ರೂಪಾಂತರಗಳು ಮತ್ತು ದೃಶ್ಯ ಪರಿಣಾಮಗಳನ್ನು ಸ್ವತಂತ್ರವಾಗಿ ನಿರ್ವಹಿಸಲು ಬ್ರೌಸರ್ ಅನ್ನು ಅನುಮತಿಸುತ್ತದೆ, ಈ ಅಂಶಗಳು ಪುಟದ ಉಳಿದ ಭಾಗಗಳೊಂದಿಗೆ ಹೇಗೆ ಸಂವಹನ ನಡೆಸುತ್ತವೆ ಎಂಬುದನ್ನು ಮರು ಲೆಕ್ಕಾಚಾರ ಮಾಡುವ ಅಗತ್ಯವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ. "ನಾನು ಈ ಫೋಲ್ಡರ್ ಅನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ನಿರ್ವಹಿಸುತ್ತೇನೆ ಆದ್ದರಿಂದ ಅದರೊಳಗೆ ಏನಾದರೂ ಬದಲಾವಣೆಯಾದಾಗಲೆಲ್ಲಾ ನಾನು ಸಂಪೂರ್ಣ ಡೆಸ್ಕ್ ಅನ್ನು ಮರುಹೊಂದಿಸಬೇಕಾಗಿಲ್ಲ" ಎಂದು ಹೇಳುವ ಬ್ರೌಸರ್ ಎಂದು ಯೋಚಿಸಿ. ಆದರೆ ಇದೆಒಂದು ಅಡ್ಡ ಪರಿಣಾಮ. ಬ್ರೌಸರ್ ತನ್ನ ಸ್ವಂತ ಪದರಕ್ಕೆ ಒಂದು ಅಂಶವನ್ನು ಎತ್ತಿದ ನಂತರ, ಅದು ಅದರೊಳಗೆ ಎಲ್ಲವನ್ನೂ "ಚಪ್ಪಟೆಗೊಳಿಸಬೇಕು", ಹೊಸ ಪೇರಿಸುವ ಸಂದರ್ಭವನ್ನು ರಚಿಸುತ್ತದೆ. ಅದನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ನಿರ್ವಹಿಸಲು ಡೆಸ್ಕ್ನಿಂದ ಫೋಲ್ಡರ್ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳುವಂತಿದೆ; ಆ ಫೋಲ್ಡರ್ನ ಒಳಗಿರುವ ಎಲ್ಲವನ್ನೂ ಗುಂಪು ಮಾಡಲಾಗುತ್ತದೆ ಮತ್ತು ಬ್ರೌಸರ್ ಈಗ ಯಾವುದರ ಮೇಲೆ ಏನಿದೆ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುವಾಗ ಅದನ್ನು ಒಂದೇ ಘಟಕವಾಗಿ ಪರಿಗಣಿಸುತ್ತದೆ. ಆದ್ದರಿಂದ ರೂಪಾಂತರ ಮತ್ತು ಅಪಾರದರ್ಶಕತೆಯ ಗುಣಲಕ್ಷಣಗಳು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಅಂಶಗಳನ್ನು ಜೋಡಿಸುವ ರೀತಿಯಲ್ಲಿ ಪರಿಣಾಮ ಬೀರದಿದ್ದರೂ ಸಹ, ಅವುಗಳು ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಮತ್ತು ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಆಪ್ಟಿಮೈಸೇಶನ್ಗಾಗಿ. ಹಲವಾರು ಇತರ CSS ಗುಣಲಕ್ಷಣಗಳು ಇದೇ ಕಾರಣಗಳಿಗಾಗಿ ಪೇರಿಸುವಿಕೆಯ ಸಂದರ್ಭಗಳನ್ನು ಸಹ ರಚಿಸಬಹುದು. ನೀವು ಆಳವಾಗಿ ಅಗೆಯಲು ಬಯಸಿದರೆ MDN ಸಂಪೂರ್ಣ ಪಟ್ಟಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ಕೆಲವು ಇವೆ, ಇದು ತಿಳಿಯದೆ ಪೇರಿಸುವ ಸಂದರ್ಭವನ್ನು ಅಜಾಗರೂಕತೆಯಿಂದ ರಚಿಸುವುದು ಎಷ್ಟು ಸುಲಭ ಎಂಬುದನ್ನು ವಿವರಿಸುತ್ತದೆ. "ಅನ್ಸ್ಟಾಕಿಂಗ್" ಸಮಸ್ಯೆ ಪೇರಿಸುವಿಕೆಯ ಸಮಸ್ಯೆಗಳು ಅನೇಕ ಕಾರಣಗಳಿಗಾಗಿ ಉಂಟಾಗಬಹುದು, ಆದರೆ ಕೆಲವು ಇತರರಿಗಿಂತ ಹೆಚ್ಚು ಸಾಮಾನ್ಯವಾಗಿದೆ. ಮಾದರಿ ಘಟಕಗಳು ಒಂದು ಶ್ರೇಷ್ಠ ಮಾದರಿಯಾಗಿದೆ ಏಕೆಂದರೆ ಅವುಗಳು ಎಲ್ಲಾ ಇತರ ಅಂಶಗಳಿಗಿಂತ ಮೇಲಿನ ಪದರದಲ್ಲಿ "ತೆರೆಯಲು" ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಟಾಗಲ್ ಮಾಡುವ ಅಗತ್ಯವಿರುತ್ತದೆ, ನಂತರ ಅದನ್ನು "ಮುಚ್ಚಿದಾಗ" ಮೇಲಿನ ಪದರದಿಂದ ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ. ನಾವೆಲ್ಲರೂ ಒಂದು ಮಾದರಿಯನ್ನು ತೆರೆಯುವ ಪರಿಸ್ಥಿತಿಗೆ ಸಿಲುಕಿದ್ದೇವೆ ಮತ್ತು ಯಾವುದೇ ಕಾರಣಕ್ಕಾಗಿ ಅದು ಗೋಚರಿಸುವುದಿಲ್ಲ ಎಂದು ನನಗೆ ಸಾಕಷ್ಟು ವಿಶ್ವಾಸವಿದೆ. ಅದು ಸರಿಯಾಗಿ ತೆರೆಯಲಿಲ್ಲವಲ್ಲ, ಆದರೆ ಪೇರಿಸುವ ಸಂದರ್ಭದ ಕೆಳಗಿನ ಪದರದಲ್ಲಿ ಅದು ನೋಟದಿಂದ ಹೊರಗಿದೆ. ಇದು ನಿಮಗೆ "ಹೇಗೆ ಬರುತ್ತದೆ?" ಎಂದು ಆಶ್ಚರ್ಯ ಪಡುವಂತೆ ಮಾಡುತ್ತದೆ. ನೀವು ಹೊಂದಿಸಿದಾಗಿನಿಂದ:
.ಓವರ್ಲೇ { ಸ್ಥಾನ: ಸ್ಥಿರ; /* ಪೇರಿಸುವ ಸಂದರ್ಭವನ್ನು ರಚಿಸುತ್ತದೆ */ z-ಸೂಚ್ಯಂಕ: 1; /* ಎಲ್ಲದಕ್ಕಿಂತ ಮೇಲಿನ ಪದರದ ಮೇಲೆ ಅಂಶವನ್ನು ಇರಿಸುತ್ತದೆ */ ಒಳಹರಿವು: 0; ಅಗಲ: 100%; ಎತ್ತರ: 100vh; ಉಕ್ಕಿ: ಮರೆಯಾಗಿ; ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: #00000080; }
ಇದು ಸರಿಯಾಗಿ ಕಾಣುತ್ತದೆ, ಆದರೆ ಮಾದರಿ ಟ್ರಿಗ್ಗರ್ ಅನ್ನು ಹೊಂದಿರುವ ಮೂಲ ಅಂಶವು ಮತ್ತೊಂದು ಮೂಲ ಅಂಶದೊಳಗಿನ ಮಕ್ಕಳ ಅಂಶವಾಗಿದ್ದರೆ ಅದು z-ಇಂಡೆಕ್ಸ್: 1 ಗೆ ಹೊಂದಿಸಲಾಗಿದೆ, ಅದು ತಾಂತ್ರಿಕವಾಗಿ ಮುಖ್ಯ ಫೋಲ್ಡರ್ನಿಂದ ಅಸ್ಪಷ್ಟವಾಗಿರುವ ಸಬ್ಲೇಯರ್ನಲ್ಲಿ ಮೋಡಲ್ ಅನ್ನು ಇರಿಸುತ್ತದೆ. ಆ ನಿರ್ದಿಷ್ಟ ಸನ್ನಿವೇಶ ಮತ್ತು ಇತರ ಕೆಲವು ಸಾಮಾನ್ಯ ಪೇರಿಸುವಿಕೆ-ಸಂದರ್ಭದ ಮೋಸಗಳನ್ನು ನೋಡೋಣ. ಅಜಾಗರೂಕತೆಯಿಂದ ಪೇರಿಸುವ ಸಂದರ್ಭಗಳನ್ನು ರಚಿಸುವುದು ಎಷ್ಟು ಸುಲಭ, ಆದರೆ ಅವುಗಳನ್ನು ಹೇಗೆ ತಪ್ಪಾಗಿ ನಿರ್ವಹಿಸುವುದು ಎಂಬುದನ್ನು ಸಹ ನೀವು ನೋಡುತ್ತೀರಿ ಎಂದು ನಾನು ಭಾವಿಸುತ್ತೇನೆ. ಅಲ್ಲದೆ, ನೀವು ನಿರ್ವಹಿಸಿದ ಸ್ಥಿತಿಗೆ ಹೇಗೆ ಹಿಂತಿರುಗುತ್ತೀರಿ ಎಂಬುದು ಪರಿಸ್ಥಿತಿಯನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ. ಸನ್ನಿವೇಶ 1: ಟ್ರಾಪ್ಡ್ ಮಾದರಿ
ನಿಮ್ಮ ಮೋಡಲ್ ಕೆಳಮಟ್ಟದ ಪದರದಲ್ಲಿ ಸಿಕ್ಕಿಬಿದ್ದಿರುವುದನ್ನು ನೀವು ತಕ್ಷಣವೇ ನೋಡಬಹುದು ಮತ್ತು ಪೋಷಕರನ್ನು ಗುರುತಿಸಬಹುದು. ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಗಳು ಸ್ಮಾರ್ಟ್ ಡೆವಲಪರ್ಗಳು ಸಹಾಯ ಮಾಡಲು ವಿಸ್ತರಣೆಗಳನ್ನು ನಿರ್ಮಿಸಿದ್ದಾರೆ. ಈ "CSS ಪೇರಿಸುವಿಕೆ ಸಂದರ್ಭ ಪರಿವೀಕ್ಷಕ" Chrome ವಿಸ್ತರಣೆಯಂತಹ ಪರಿಕರಗಳು ಪೇರಿಸುವ ಸಂದರ್ಭವನ್ನು ರಚಿಸುವ ಅಂಶಗಳ ಕುರಿತು ನಿಮಗೆ ಮಾಹಿತಿಯನ್ನು ತೋರಿಸಲು ನಿಮ್ಮ DevTools ಗೆ ಹೆಚ್ಚುವರಿ z-ಸೂಚ್ಯಂಕ ಟ್ಯಾಬ್ ಅನ್ನು ಸೇರಿಸುತ್ತವೆ.
IDE ವಿಸ್ತರಣೆಗಳು VS ಕೋಡ್ಗಾಗಿ ಈ ರೀತಿಯ ವಿಸ್ತರಣೆಯೊಂದಿಗೆ ಅಭಿವೃದ್ಧಿಯ ಸಮಯದಲ್ಲಿ ನೀವು ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸಬಹುದು, ಇದು ನಿಮ್ಮ ಸಂಪಾದಕದಲ್ಲಿ ನೇರವಾಗಿ ಸಂಭಾವ್ಯ ಪೇರಿಸುವಿಕೆಯ ಸಂದರ್ಭ ಸಮಸ್ಯೆಗಳನ್ನು ಎತ್ತಿ ತೋರಿಸುತ್ತದೆ.
ಅನ್ಸ್ಟಾಕಿಂಗ್ ಮತ್ತು ನಿಯಂತ್ರಣವನ್ನು ಮರಳಿ ಪಡೆಯುವುದು ನಾವು ಮೂಲ ಕಾರಣವನ್ನು ಗುರುತಿಸಿದ ನಂತರ, ಮುಂದಿನ ಹಂತವು ಅದನ್ನು ನಿಭಾಯಿಸುವುದು. ಈ ಸಮಸ್ಯೆಯನ್ನು ನಿಭಾಯಿಸಲು ನೀವು ತೆಗೆದುಕೊಳ್ಳಬಹುದಾದ ಹಲವಾರು ವಿಧಾನಗಳಿವೆ, ಮತ್ತು ನಾನು ಅವುಗಳನ್ನು ಕ್ರಮವಾಗಿ ಪಟ್ಟಿ ಮಾಡುತ್ತೇನೆ. ನೀವು ಯಾವುದೇ ಮಟ್ಟದಲ್ಲಿ ಯಾರನ್ನಾದರೂ ಆಯ್ಕೆ ಮಾಡಬಹುದು; ಯಾರೂ ಇನ್ನೊಬ್ಬರಿಗೆ ದೂರು ನೀಡಲು ಅಥವಾ ತಡೆಯಲು ಸಾಧ್ಯವಿಲ್ಲ. HTML ರಚನೆಯನ್ನು ಬದಲಾಯಿಸಿ ಇದನ್ನು ಸೂಕ್ತ ಪರಿಹಾರವೆಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ. ನೀವು ಪೇರಿಸುವಿಕೆಯ ಸಂದರ್ಭದ ಸಮಸ್ಯೆಯನ್ನು ಎದುರಿಸಲು, ನಿಮ್ಮ HTML ನಲ್ಲಿ ನೀವು ಕೆಲವು ಅಂಶಗಳನ್ನು ತಮಾಷೆಯ ಸ್ಥಾನಗಳಲ್ಲಿ ಇರಿಸಿರಬೇಕು. ಪುಟವನ್ನು ಪುನರ್ರಚಿಸುವುದು ನಿಮಗೆ DOM ಅನ್ನು ಮರುರೂಪಿಸಲು ಮತ್ತು ಪೇರಿಸುವ ಸಂದರ್ಭದ ಸಮಸ್ಯೆಯನ್ನು ನಿವಾರಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಸಮಸ್ಯಾತ್ಮಕ ಅಂಶವನ್ನು ಹುಡುಕಿ ಮತ್ತು HTML ಮಾರ್ಕ್ಅಪ್ನಲ್ಲಿ ಟ್ರ್ಯಾಪಿಂಗ್ ಅಂಶದಿಂದ ಅದನ್ನು ತೆಗೆದುಹಾಕಿ. ಉದಾಹರಣೆಗೆ, .modal-container ಅನ್ನು ಹೆಡರ್ನಿಂದ ಹೊರಕ್ಕೆ ಸರಿಸುವ ಮೂಲಕ ಮತ್ತು ಅದನ್ನು ಸ್ವತಃ
ಅಂಶದಲ್ಲಿ ಇರಿಸುವ ಮೂಲಕ ನಾವು ಮೊದಲ ಸನ್ನಿವೇಶವನ್ನು "ದಿ ಟ್ರಾಪ್ಡ್ ಮಾಡಲ್" ಅನ್ನು ಪರಿಹರಿಸಬಹುದು.<ಹೆಡರ್ ವರ್ಗ="ಹೆಡರ್">
ಹೆಡರ್
<ಮುಖ್ಯ ವರ್ಗ="ವಿಷಯ">ಮುಖ್ಯ ವಿಷಯ
ಈ ವಿಷಯವು 2 ರ z-ಸೂಚ್ಯಂಕವನ್ನು ಹೊಂದಿದೆ ಮತ್ತು ಇನ್ನೂ ಮಾದರಿಯನ್ನು ಒಳಗೊಂಡಿರುವುದಿಲ್ಲ.
ನೀವು "ಓಪನ್ ಮಾಡಲ್" ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಮಾದರಿಯು ಎಲ್ಲದರ ಮುಂದೆ ಇರುವಂತೆ ಇರಿಸಲಾಗುತ್ತದೆ. ಶೋಯೊಂಬೊ ಗೇಬ್ರಿಯಲ್ ಅಯೋಮೈಡ್ ಅವರಿಂದ ಪೆನ್ ಸನ್ನಿವೇಶ 1: ದಿ ಟ್ರಾಪ್ಡ್ ಮಾಡಲ್ (ಪರಿಹಾರ) [ಫೋರ್ಕ್ಡ್] ನೋಡಿ. ದಿ ಹೊಂದಿಸಿCSS ನಲ್ಲಿ ಪೋಷಕರು ಪೇರಿಸುವ ಸಂದರ್ಭ ಲೇಔಟ್ ಅನ್ನು ಮುರಿಯದೆ ನೀವು ಚಲಿಸಲು ಸಾಧ್ಯವಾಗದ ಅಂಶವು ಒಂದಾಗಿದ್ದರೆ ಏನು? ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸುವುದು ಉತ್ತಮ: ಪೋಷಕರು ಸಂದರ್ಭವನ್ನು ಸ್ಥಾಪಿಸುತ್ತಾರೆ. ಸಂದರ್ಭವನ್ನು ಪ್ರಚೋದಿಸಲು ಜವಾಬ್ದಾರರಾಗಿರುವ CSS ಆಸ್ತಿಯನ್ನು (ಅಥವಾ ಗುಣಲಕ್ಷಣಗಳನ್ನು) ಹುಡುಕಿ ಮತ್ತು ಅದನ್ನು ತೆಗೆದುಹಾಕಿ. ಇದು ಒಂದು ಉದ್ದೇಶವನ್ನು ಹೊಂದಿದ್ದರೆ ಮತ್ತು ತೆಗೆದುಹಾಕಲಾಗದಿದ್ದರೆ, ಸಂಪೂರ್ಣ ಕಂಟೇನರ್ ಅನ್ನು ಎತ್ತುವಂತೆ ಪೋಷಕರಿಗೆ ಅದರ ಒಡಹುಟ್ಟಿದ ಅಂಶಗಳಿಗಿಂತ ಹೆಚ್ಚಿನ z-ಸೂಚ್ಯಂಕ ಮೌಲ್ಯವನ್ನು ನೀಡಿ. ಹೆಚ್ಚಿನ z-ಸೂಚ್ಯಂಕ ಮೌಲ್ಯದೊಂದಿಗೆ, ಮೂಲ ಧಾರಕವು ಮೇಲಕ್ಕೆ ಚಲಿಸುತ್ತದೆ ಮತ್ತು ಅದರ ಮಕ್ಕಳು ಬಳಕೆದಾರರಿಗೆ ಹತ್ತಿರದಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತಾರೆ. "ದಿ ಸಬ್ಮರ್ಜ್ಡ್ ಡ್ರಾಪ್ಡೌನ್" ಸನ್ನಿವೇಶದಲ್ಲಿ ನಾವು ಕಲಿತದ್ದನ್ನು ಆಧರಿಸಿ, ಡ್ರಾಪ್ಡೌನ್ ಅನ್ನು ನ್ಯಾವ್ಬಾರ್ನಿಂದ ಹೊರಗೆ ಸರಿಸಲು ನಮಗೆ ಸಾಧ್ಯವಿಲ್ಲ; ಇದು ಅರ್ಥವಾಗುವುದಿಲ್ಲ. ಆದಾಗ್ಯೂ, ನಾವು .navbar ಕಂಟೇನರ್ನ z-ಇಂಡೆಕ್ಸ್ ಮೌಲ್ಯವನ್ನು .content ಎಲಿಮೆಂಟ್ನ z-ಇಂಡೆಕ್ಸ್ ಮೌಲ್ಯಕ್ಕಿಂತ ಹೆಚ್ಚಿಗೆ ಹೆಚ್ಚಿಸಬಹುದು. .navbar { ಹಿನ್ನೆಲೆ: #333; /* z-ಸೂಚ್ಯಂಕ: 1; */ z-ಸೂಚ್ಯಂಕ: 3; ಸ್ಥಾನ: ಸಂಬಂಧಿ; }
ಈ ಬದಲಾವಣೆಯೊಂದಿಗೆ, .dropdown-menu ಈಗ ಯಾವುದೇ ಸಮಸ್ಯೆಯಿಲ್ಲದೆ ವಿಷಯದ ಮುಂದೆ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ. ಶೋಯೊಂಬೊ ಗೇಬ್ರಿಯಲ್ ಅಯೋಮೈಡ್ ಅವರಿಂದ ಪೆನ್ ಸನ್ನಿವೇಶ 2: ಮುಳುಗಿದ ಡ್ರಾಪ್ಡೌನ್ (ಪರಿಹಾರ) [ಫೋರ್ಕ್ಡ್] ನೋಡಿ. ಚೌಕಟ್ಟನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ ಪೋರ್ಟಲ್ಗಳನ್ನು ಪ್ರಯತ್ನಿಸಿ ರಿಯಾಕ್ಟ್ ಅಥವಾ ವ್ಯೂ ನಂತಹ ಫ್ರೇಮ್ವರ್ಕ್ಗಳಲ್ಲಿ, ಪೋರ್ಟಲ್ ಒಂದು ವೈಶಿಷ್ಟ್ಯವಾಗಿದ್ದು, DOM ನಲ್ಲಿ ಅದರ ಸಾಮಾನ್ಯ ಪೋಷಕ ಕ್ರಮಾನುಗತದ ಹೊರಗೆ ಘಟಕವನ್ನು ನಿರೂಪಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಪೋರ್ಟಲ್ಗಳು ನಿಮ್ಮ ಘಟಕಗಳಿಗೆ ಟೆಲಿಪೋರ್ಟೇಶನ್ ಸಾಧನದಂತಿವೆ. ಪ್ರಾಪ್ಸ್, ಸ್ಟೇಟ್ ಮತ್ತು ಈವೆಂಟ್ಗಳಿಗಾಗಿ ಅದರ ಮೂಲ ಪೋಷಕರೊಂದಿಗೆ ತಾರ್ಕಿಕವಾಗಿ ಸಂಪರ್ಕದಲ್ಲಿರುವಾಗ ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿ ಎಲ್ಲಿಯಾದರೂ (ಸಾಮಾನ್ಯವಾಗಿ ಡಾಕ್ಯುಮೆಂಟ್.ಬಾಡಿಗೆ) ಕಾಂಪೊನೆಂಟ್ನ HTML ಅನ್ನು ನಿರೂಪಿಸಲು ಅವರು ನಿಮಗೆ ಅವಕಾಶ ಮಾಡಿಕೊಡುತ್ತಾರೆ. ರೆಂಡರ್ ಮಾಡಲಾದ ಔಟ್ಪುಟ್ ಅಕ್ಷರಶಃ ಸಮಸ್ಯಾತ್ಮಕ ಪೋಷಕ ಕಂಟೇನರ್ನ ಹೊರಗೆ ಗೋಚರಿಸುವುದರಿಂದ ಪೇರಿಸುವ ಸಂದರ್ಭದ ಬಲೆಗಳಿಂದ ತಪ್ಪಿಸಿಕೊಳ್ಳಲು ಇದು ಪರಿಪೂರ್ಣವಾಗಿದೆ. ReactDOM.createPortal( <ಉಪಕರಣ ಸಲಹೆ />, ಡಾಕ್ಯುಮೆಂಟ್.ದೇಹ );
ಪೋಷಕರು ಓವರ್ಫ್ಲೋ ಹೊಂದಿದ್ದರೂ ಸಹ, ನಿಮ್ಮ ಡ್ರಾಪ್ಡೌನ್ ವಿಷಯವನ್ನು ಅದರ ಪೋಷಕರ ಹಿಂದೆ ಮರೆಮಾಡಲಾಗಿಲ್ಲ ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ: ಮರೆಮಾಡಲಾಗಿದೆ ಅಥವಾ ಕಡಿಮೆ z-ಇಂಡೆಕ್ಸ್. ನಾವು ಮೊದಲು ನೋಡಿದ "ದಿ ಕ್ಲಿಪ್ಡ್ ಟೂಲ್ಟಿಪ್" ಸನ್ನಿವೇಶದಲ್ಲಿ, ಓವರ್ಫ್ಲೋನಿಂದ ಟೂಲ್ಟಿಪ್ ಅನ್ನು ರಕ್ಷಿಸಲು ನಾನು ಪೋರ್ಟಲ್ ಅನ್ನು ಬಳಸಿದ್ದೇನೆ: ಡಾಕ್ಯುಮೆಂಟ್ ಬಾಡಿಯಲ್ಲಿ ಅದನ್ನು ಇರಿಸುವ ಮೂಲಕ ಮತ್ತು ಕಂಟೇನರ್ನೊಳಗೆ ಟ್ರಿಗ್ಗರ್ನ ಮೇಲೆ ಇರಿಸುವ ಮೂಲಕ ಮರೆಮಾಡಿದ ಕ್ಲಿಪ್. ಶೋಯೊಂಬೊ ಗೇಬ್ರಿಯಲ್ ಅಯೋಮೈಡ್ ಅವರಿಂದ ಪೆನ್ ಸನ್ನಿವೇಶ 3: ಕ್ಲಿಪ್ಡ್ ಟೂಲ್ಟಿಪ್ (ಪರಿಹಾರ) [ಫೋರ್ಕ್ಡ್] ನೋಡಿ. ಸೈಡ್ ಎಫೆಕ್ಟ್ಗಳಿಲ್ಲದೆ ಪೇರಿಸುವ ಸಂದರ್ಭವನ್ನು ಪರಿಚಯಿಸಲಾಗುತ್ತಿದೆ ಹಿಂದಿನ ವಿಭಾಗದಲ್ಲಿ ವಿವರಿಸಿದ ಎಲ್ಲಾ ವಿಧಾನಗಳು ಸಮಸ್ಯಾತ್ಮಕ ಪೇರಿಸುವ ಸಂದರ್ಭಗಳಿಂದ ಅಂಶಗಳನ್ನು "ಅನ್ಸ್ಟಾಕಿಂಗ್" ಮಾಡುವ ಗುರಿಯನ್ನು ಹೊಂದಿವೆ, ಆದರೆ ನಿಮಗೆ ನಿಜವಾಗಿಯೂ ಅಗತ್ಯವಿರುವ ಅಥವಾ ಪೇರಿಸುವ ಸಂದರ್ಭವನ್ನು ರಚಿಸಲು ಕೆಲವು ಸಂದರ್ಭಗಳಿವೆ. ಹೊಸ ಪೇರಿಸುವಿಕೆಯ ಸಂದರ್ಭವನ್ನು ರಚಿಸುವುದು ಸುಲಭ, ಆದರೆ ಎಲ್ಲಾ ವಿಧಾನಗಳು ಅಡ್ಡ ಪರಿಣಾಮದೊಂದಿಗೆ ಬರುತ್ತವೆ. ಅಂದರೆ, ಪ್ರತ್ಯೇಕತೆಯನ್ನು ಬಳಸುವುದನ್ನು ಹೊರತುಪಡಿಸಿ: ಪ್ರತ್ಯೇಕಿಸಿ. ಒಂದು ಅಂಶಕ್ಕೆ ಅನ್ವಯಿಸಿದಾಗ, ಆ ಅಂಶದ ಮಕ್ಕಳ ಪೇರಿಸುವಿಕೆಯ ಸಂದರ್ಭವು ಅದರ ಹೊರಗಿನ ಅಂಶಗಳಿಂದ ಪ್ರಭಾವಿತವಾಗುವುದಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿ ಪ್ರತಿ ಮಗುವಿಗೆ ಮತ್ತು ಆ ಸಂದರ್ಭದೊಳಗೆ ನಿರ್ಧರಿಸಲ್ಪಡುತ್ತದೆ. ಒಂದು ಶ್ರೇಷ್ಠ ಉದಾಹರಣೆಯೆಂದರೆ ಆ ಅಂಶವನ್ನು ಋಣಾತ್ಮಕ ಮೌಲ್ಯವನ್ನು ನಿಯೋಜಿಸುವುದು, ಉದಾಹರಣೆಗೆ z-ಇಂಡೆಕ್ಸ್: -1. ನೀವು .ಕಾರ್ಡ್ ಘಟಕವನ್ನು ಹೊಂದಿರುವಿರಿ ಎಂದು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ನೀವು .ಕಾರ್ಡ್ನ ಪಠ್ಯದ ಹಿಂದೆ ಇರುವ ಅಲಂಕಾರಿಕ ಆಕಾರವನ್ನು ಸೇರಿಸಲು ಬಯಸುತ್ತೀರಿ, ಆದರೆ ಕಾರ್ಡ್ನ ಹಿನ್ನೆಲೆಯ ಮೇಲೆ. ಕಾರ್ಡ್ನಲ್ಲಿ ಪೇರಿಸುವ ಸಂದರ್ಭವಿಲ್ಲದೆ, z-ಸೂಚ್ಯಂಕ: -1 ರೂಟ್ ಸ್ಟಾಕಿಂಗ್ ಸಂದರ್ಭದ ಕೆಳಭಾಗಕ್ಕೆ ಆಕಾರವನ್ನು ಕಳುಹಿಸುತ್ತದೆ (ಇಡೀ ಪುಟ). ಇದು .ಕಾರ್ಡ್ನ ಬಿಳಿ ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಮರೆಯಾಗುವಂತೆ ಮಾಡುತ್ತದೆ: ಶೋಯೊಂಬೊ ಗೇಬ್ರಿಯಲ್ ಅಯೋಮೈಡ್ ಅವರ ಪೆನ್ ನೆಗೆಟಿವ್ z-ಇಂಡೆಕ್ಸ್ (ಸಮಸ್ಯೆ) [ಫೋರ್ಕ್ಡ್] ನೋಡಿ. ಇದನ್ನು ಪರಿಹರಿಸಲು, ನಾವು ಪ್ರತ್ಯೇಕತೆಯನ್ನು ಘೋಷಿಸುತ್ತೇವೆ: ಪೋಷಕ .ಕಾರ್ಡ್ನಲ್ಲಿ ಪ್ರತ್ಯೇಕಿಸಿ: ಶೋಯೊಂಬೊ ಗೇಬ್ರಿಯಲ್ ಅಯೋಮೈಡ್ ಅವರ ಪೆನ್ ನೆಗೆಟಿವ್ z-ಇಂಡೆಕ್ಸ್ (ಪರಿಹಾರ) [ಫೋರ್ಕ್ಡ್] ನೋಡಿ. ಈಗ, .ಕಾರ್ಡ್ ಅಂಶವು ಸ್ವತಃ ಪೇರಿಸುವ ಸಂದರ್ಭವಾಗಿದೆ. ಅದರ ಚೈಲ್ಡ್ ಎಲಿಮೆಂಟ್ - ಸ್ಯೂಡೋ-ಎಲಿಮೆಂಟ್ಗೆ ಮೊದಲು ರಚಿಸಲಾದ ಅಲಂಕಾರಿಕ ಆಕಾರವು - z-ಇಂಡೆಕ್ಸ್: -1 ಅನ್ನು ಹೊಂದಿರುವಾಗ, ಅದು ಪೋಷಕರ ಪೇರಿಸುವ ಸಂದರ್ಭದ ಅತ್ಯಂತ ಕೆಳಭಾಗಕ್ಕೆ ಹೋಗುತ್ತದೆ. ಇದು ಪಠ್ಯದ ಹಿಂದೆ ಮತ್ತು ಕಾರ್ಡ್ನ ಹಿನ್ನೆಲೆಯ ಮೇಲೆ ಉದ್ದೇಶಿಸಿದಂತೆ ಸಂಪೂರ್ಣವಾಗಿ ಇರುತ್ತದೆ. ತೀರ್ಮಾನ ನೆನಪಿಡಿ: ಮುಂದಿನ ಬಾರಿ ನಿಮ್ಮ z-ಸೂಚ್ಯಂಕವು ನಿಯಂತ್ರಣದಲ್ಲಿಲ್ಲ ಎಂದು ತೋರಿದರೆ, ಅದು ಸಿಕ್ಕಿಬಿದ್ದ ಪೇರಿಸುವ ಸಂದರ್ಭವಾಗಿದೆ. ಉಲ್ಲೇಖಗಳು
ಸ್ಟ್ಯಾಕಿಂಗ್ ಸಂದರ್ಭ (MDN) Z-ಸೂಚ್ಯಂಕ ಮತ್ತು ಪೇರಿಸುವಿಕೆಯ ಸಂದರ್ಭಗಳು (web.dev) "ಸಿಎಸ್ಎಸ್ನಲ್ಲಿ ಪ್ರತ್ಯೇಕತೆಯ ಆಸ್ತಿಯೊಂದಿಗೆ ಹೊಸ ಪೇರಿಸುವ ಸಂದರ್ಭವನ್ನು ಹೇಗೆ ರಚಿಸುವುದು", ನಟಾಲಿ ಪಿನಾ "ವಾಟ್ ದಿ ಹೆಕ್, z-ಇಂಡೆಕ್ಸ್??", ಜೋಶ್ ಕೊಮೌ
SmashingMag ನಲ್ಲಿ ಹೆಚ್ಚಿನ ಓದುವಿಕೆ
"ದೊಡ್ಡ ಯೋಜನೆಗಳಲ್ಲಿ CSS Z-ಸೂಚ್ಯಂಕವನ್ನು ನಿರ್ವಹಿಸುವುದು", ಸ್ಟೀವನ್ ಫ್ರೈಸನ್ "ಜಿಗುಟಾದ ಹೆಡರ್ಗಳು ಮತ್ತು ಪೂರ್ಣ-ಎತ್ತರದ ಅಂಶಗಳು: ಒಂದು ಟ್ರಿಕಿ ಸಂಯೋಜನೆ", ಫಿಲಿಪ್ ಬ್ರೌನೆನ್ "ಘಟಕ-ಆಧಾರಿತ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ನಲ್ಲಿ Z- ಸೂಚ್ಯಂಕವನ್ನು ನಿರ್ವಹಿಸುವುದು", ಪಾವೆಲ್ ಪೊಮರಂಟ್ಸೆವ್ "ದಿ Z-ಇಂಡೆಕ್ಸ್ CSS ಪ್ರಾಪರ್ಟಿ: ಎ ಕಾಂಪ್ರಹೆನ್ಸಿವ್ ಲುಕ್", ಲೂಯಿಸ್ ಲಾಜಾರಿಸ್
