ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್ಸ್ನೊಂದಿಗೆ ಸ್ಥಾನಗಳನ್ನು ಅತಿಕ್ರಮಿಸುವ ಸ್ಥಾನೀಕರಣ
ವೆಬ್ ಪೇಜ್ ಲೇಔಟ್ಗಾಗಿ ಸಿಎಸ್ಎಸ್ ಸ್ಥಾನೀಕರಣವನ್ನು ಬಳಸುವಾಗ ನಿಮ್ಮ ಕೆಲವು ಅಂಶಗಳು ಇತರರ ಮೇಲೆ ಅತಿಕ್ರಮಿಸಬಹುದು ಎಂಬ ಸವಾಲುಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ. ಎಚ್ಟಿಎಮ್ಎಲ್ನಲ್ಲಿ ಕೊನೆಯ ಅಂಶವು ಮೇಲ್ಭಾಗದಲ್ಲಿರಬೇಕು ಎಂದು ನೀವು ಬಯಸಿದರೆ, ಇತರರು ಅದನ್ನು ಪ್ರಸ್ತುತವಾಗಿ ಅತಿಕ್ರಮಿಸದಿರುವ ಅಂಶಗಳನ್ನು ನೀವು ಬಯಸದಿದ್ದರೆ ಅಥವಾ ಏನು ಮಾಡಬೇಕೆಂದರೆ, ಈ "ಲೇಯರ್ಡ್" ನೋಟಕ್ಕಾಗಿ ವಿನ್ಯಾಸವು ಕರೆಸಿಕೊಳ್ಳುತ್ತದೆ ? ಅಂಶಗಳನ್ನು ಅತಿಕ್ರಮಿಸುವ ರೀತಿಯಲ್ಲಿ ಬದಲಿಸಲು ನೀವು ಸಿಎಸ್ಎಸ್ನ ಆಸ್ತಿಯನ್ನು ಬಳಸಬೇಕಾಗುತ್ತದೆ.
ನೀವು ವರ್ಡ್ ಮತ್ತು ಪವರ್ಪಾಯಿಂಟ್ ಅಥವಾ ಅಡೋಬ್ ಫೋಟೊಶಾಪ್ನಂತಹ ಹೆಚ್ಚು ದೃಢವಾದ ಇಮೇಜ್ ಎಡಿಟರ್ ನಲ್ಲಿ ಗ್ರಾಫಿಕ್ಸ್ ಉಪಕರಣಗಳನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ, ನಂತರ ನೀವು ಝಡ್-ಇಂಡೆಕ್ಸ್ನಂತೆಯೇ ಕಾಣುವ ಸಾಧ್ಯತೆಗಳಿವೆ. ಈ ಪ್ರೋಗ್ರಾಂಗಳಲ್ಲಿ, ನೀವು ಡ್ರಾ ಮಾಡಿದ ವಸ್ತುವನ್ನು (ಹೈಲೈಟ್) ಹೈಲೈಟ್ ಮಾಡಬಹುದು ಮತ್ತು ನಿಮ್ಮ ಡಾಕ್ಯುಮೆಂಟ್ನ ಕೆಲವು ಅಂಶಗಳನ್ನು "ಹಿಂತಿರುಗಿ" ಅಥವಾ "ಮುಂದಕ್ಕೆ ತರಲು" ಒಂದು ಆಯ್ಕೆಯನ್ನು ಆರಿಸಿ. ಫೋಟೋಶಾಪ್ನಲ್ಲಿ, ನೀವು ಈ ಕಾರ್ಯಗಳನ್ನು ಹೊಂದಿಲ್ಲ, ಆದರೆ ನೀವು ಪ್ರೋಗ್ರಾಂನ "ಲೇಯರ್" ಫಲಕವನ್ನು ಹೊಂದಿರುತ್ತೀರಿ ಮತ್ತು ಕ್ಯಾನ್ವಾಸ್ನಲ್ಲಿ ಅಂಶವು ಈ ಪದರಗಳನ್ನು ಮರುಹೊಂದಿಸಿ ಅಲ್ಲಿ ನೀವು ವ್ಯವಸ್ಥೆ ಮಾಡಬಹುದು. ಈ ಎರಡೂ ಉದಾಹರಣೆಗಳು, ನೀವು ಮೂಲಭೂತವಾಗಿ ಆ ವಸ್ತುಗಳ Z- ಸೂಚ್ಯಂಕವನ್ನು ಹೊಂದಿದ್ದೀರಿ.
Z- ಸೂಚ್ಯಂಕ ಎಂದರೇನು?
ನೀವು ಪುಟದ ಅಂಶಗಳನ್ನು ಇರಿಸಲು ಸಿಎಸ್ಎಸ್ ಸ್ಥಾನೀಕರಣವನ್ನು ಬಳಸುವಾಗ, ನೀವು ಮೂರು ಆಯಾಮಗಳಲ್ಲಿ ಯೋಚಿಸಬೇಕು. ಎರಡು ಸ್ಟ್ಯಾಂಡರ್ಡ್ ಆಯಾಮಗಳು ಇವೆ: ಎಡ / ಬಲ ಮತ್ತು ಮೇಲಿನ / ಕೆಳಭಾಗದಲ್ಲಿ. ಎಡದಿಂದ ಬಲ ಸೂಚ್ಯಂಕವು x- ಸೂಚ್ಯಂಕ ಎಂದು ಕರೆಯಲ್ಪಡುತ್ತದೆ, ಆದರೆ ಕೆಳಕ್ಕೆ ಒಂದು y- ಸೂಚ್ಯಂಕವಾಗಿದೆ. ಈ ಎರಡು ಸೂಚ್ಯಂಕಗಳನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಅಂಶಗಳನ್ನು ಅಡ್ಡಲಾಗಿ ಅಥವಾ ಲಂಬವಾಗಿ ಹೇಗೆ ಇರಿಸಿರುತ್ತೀರಿ.
ವೆಬ್ ವಿನ್ಯಾಸಕ್ಕೆ ಬಂದಾಗ, ಪುಟದ ಪೇರಿಸುವ ಕ್ರಮವೂ ಇದೆ. ಪುಟದ ಪ್ರತಿ ಅಂಶವು ಯಾವುದೇ ಅಂಶಕ್ಕಿಂತ ಮೇಲಿರಬಹುದು ಅಥವಾ ಕೆಳಗಿನಂತೆ ಲೇಯರ್ಡ್ ಮಾಡಬಹುದು. Z- ಸೂಚ್ಯಂಕ ಆಸ್ತಿ ಪ್ರತಿ ಅಂಶದಲ್ಲಿ ಸ್ಟಾಕ್ ಎಲ್ಲಿದೆ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. X- ಸೂಚ್ಯಂಕ ಮತ್ತು y- ಸೂಚ್ಯಂಕಗಳು ಸಮತಲ ಮತ್ತು ಲಂಬ ರೇಖೆಗಳಾಗಿದ್ದರೆ, ನಂತರ z- ಸೂಚ್ಯಂಕವು ಪುಟದ ಆಳವಾಗಿದೆ, ಅದರಲ್ಲೂ ಮುಖ್ಯವಾಗಿ 3 ನೇ ಆಯಾಮ.
ಕಾಗದದ ತುಂಡುಗಳಾಗಿ ವೆಬ್ಪುಟದ ಅಂಶಗಳ ಬಗ್ಗೆ ಯೋಚಿಸಲು ನಾನು ಬಯಸುತ್ತೇನೆ ಮತ್ತು ವೆಬ್ ಪುಟವು ಕೊಲಾಜ್ನಂತೆ. ನಾನು ಕಾಗದವನ್ನು ಸ್ಥಾನೀಕರಣದ ಮೂಲಕ ನಿರ್ಧರಿಸಲಾಗುತ್ತದೆ, ಮತ್ತು ಇತರ ಅಂಶಗಳಿಂದ ಅದು ಎಷ್ಟು ಝಡ್-ಇಂಡೆಕ್ಸ್ ಅನ್ನು ಒಳಗೊಂಡಿದೆ.
Z- ಸೂಚ್ಯಂಕವು ಧನಾತ್ಮಕ (ಉದಾ. 100) ಅಥವಾ ನಕಾರಾತ್ಮಕ (ಉದಾ -100) ಒಂದು ಸಂಖ್ಯೆಯಾಗಿದೆ. ಡೀಫಾಲ್ಟ್ z- ಸೂಚ್ಯಂಕ 0 ಆಗಿದೆ. ಹೆಚ್ಚಿನ z- ಸೂಚ್ಯಂಕದ ಅಂಶವು ಮೇಲ್ಭಾಗದಲ್ಲಿರುತ್ತದೆ, ನಂತರದ ಅತಿ ಹೆಚ್ಚು ಮತ್ತು ಕಡಿಮೆ Z- ಸೂಚ್ಯಂಕದ ಕೆಳಗೆ. ಎರಡು ಅಂಶಗಳು ಒಂದೇ ರೀತಿಯ ಝಡ್-ಇಂಡೆಕ್ಸ್ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿದ್ದರೆ (ಅಥವಾ ಅದನ್ನು ವ್ಯಾಖ್ಯಾನಿಸದಿದ್ದರೆ, ಅಂದರೆ 0 ರ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವನ್ನು ಅರ್ಥೈಸಿಕೊಳ್ಳಿ) ಬ್ರೌಸರ್ ಅನ್ನು ಪದರವು ಕ್ರಮದಲ್ಲಿ ಕ್ರಮವಾಗಿ ಎಚ್ಟಿಎಮ್ಎಲ್ನಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ.
Z- ಸೂಚಿಯನ್ನು ಹೇಗೆ ಬಳಸುವುದು
ನಿಮ್ಮ ಸ್ಟಾಕ್ನಲ್ಲಿ ಬೇಕಾದ ಪ್ರತಿಯೊಂದು ಅಂಶವನ್ನು ಬೇರೆ ಝಡ್-ಇಂಡೆಕ್ಸ್ ಮೌಲ್ಯವನ್ನು ನೀಡಿ. ಉದಾಹರಣೆಗೆ, ನಾನು ಐದು ವಿಭಿನ್ನ ಅಂಶಗಳನ್ನು ಹೊಂದಿದ್ದರೆ:
- ಅಂಶ 1 - -25 ರ z- ಸೂಚ್ಯಂಕ
- ಅಂಶ 2 - z- ಸೂಚ್ಯಂಕ 82
- ಅಂಶ 3 - z- ಸೂಚ್ಯಂಕವನ್ನು ಹೊಂದಿಸಲಾಗಿಲ್ಲ
- ಅಂಶ 4 - z- ಸೂಚ್ಯಂಕ 10
- ಅಂಶ 5 - z-index -3
ಅವರು ಕೆಳಗಿನ ಕ್ರಮದಲ್ಲಿ ಬರುತ್ತಾರೆ:
- ಅಂಶ 2
- ಅಂಶ 4
- ಅಂಶ 3
- ಅಂಶ 5
- ಅಂಶ 1
ನಿಮ್ಮ ಅಂಶಗಳನ್ನು ಸ್ಟ್ಯಾಕ್ ಮಾಡಲು ವಿಭಿನ್ನವಾದ Z- ಸೂಚ್ಯಂಕ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸಿಕೊಂಡು ನಾನು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ. ಆ ರೀತಿಯಲ್ಲಿ, ನೀವು ನಂತರ ಪುಟಕ್ಕೆ ಇನ್ನಷ್ಟು ಅಂಶಗಳನ್ನು ಸೇರಿಸಿದರೆ, ಎಲ್ಲಾ ಇತರ ಅಂಶಗಳ z- ಸೂಚ್ಯಂಕ ಮೌಲ್ಯಗಳನ್ನು ಸರಿಹೊಂದಿಸದೆಯೇ ನೀವು ಅವುಗಳನ್ನು ಲೇಯರ್ಗೆ ಹೊಂದಿಸಿ. ಉದಾಹರಣೆಗೆ:
- ನನ್ನ ಅತ್ಯುನ್ನತ ಅಂಶಕ್ಕಾಗಿ 100
- ನನ್ನ ಮಧ್ಯದ ಅಂಶಕ್ಕಾಗಿ 0
- -100 ನನ್ನ ಕೆಳಭಾಗದ ಅಂಶಕ್ಕಾಗಿ
ನೀವು ಎರಡು ಅಂಶಗಳನ್ನು ಅದೇ ಝಡ್-ಇಂಡೆಕ್ಸ್ ಮೌಲ್ಯವನ್ನು ಸಹ ನೀಡಬಹುದು. ಈ ಅಂಶಗಳು ಜೋಡಿಸಲ್ಪಟ್ಟಿವೆಯಾದರೆ, ಅವುಗಳು HTML ನಲ್ಲಿ ಬರೆದಿರುವ ಕ್ರಮದಲ್ಲಿ ಅವುಗಳು ಮೇಲಿನ ತುದಿಯಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತವೆ.
ಒಂದು ಟಿಪ್ಪಣಿ, ಪರಿಣಾಮಕಾರಿಯಾಗಿ z- ಸೂಚ್ಯಂಕ ಆಸ್ತಿಯನ್ನು ಬಳಸುವುದಕ್ಕಾಗಿ, ಇದು ಒಂದು ಬ್ಲಾಕ್ ಮಟ್ಟದ ಅಂಶವಾಗಿರಬೇಕು ಅಥವಾ ನಿಮ್ಮ CSS ಫೈಲ್ನಲ್ಲಿ "ಬ್ಲಾಕ್" ಅಥವಾ "ಇನ್ಲೈನ್-ಬ್ಲಾಕ್" ನ ಪ್ರದರ್ಶನವನ್ನು ಬಳಸಬೇಕು.
ಜೆನ್ನಿಫರ್ ಕ್ರಿನಿನ್ರಿಂದ ಮೂಲ ಲೇಖನ. ಜೆರೆಮಿ ಗಿರಾರ್ಡ್ ಅವರು 12/09/16 ರಂದು ಸಂಪಾದಿಸಿದ್ದಾರೆ.