ಸಂಪೂರ್ಣ ಮತ್ತು ಸಾಪೇಕ್ಷ - ಸಿಎಸ್ಎಸ್ ಸ್ಥಾನೀಕರಣ ವಿವರಿಸುವ

ಸಿಎಸ್ಎಸ್ ಸ್ಥಾನೀಕರಣ ಜಸ್ಟ್ ಎಕ್ಸ್, ವೈ ಕಕ್ಷೆಗಳು ಹೆಚ್ಚು

ವೆಬ್ಸೈಟ್ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಸಿಎಸ್ಎಸ್ ಸ್ಥಾನೀಕರಣ ಬಹಳ ಮುಖ್ಯವಾಗಿದೆ. ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಮತ್ತು ಸಿಎಸ್ಎಸ್ ಗ್ರಿಡ್ನಂತಹ ಹೊಸ ಸಿಎಸ್ಎಸ್ ಲೇಔಟ್ ತಂತ್ರಗಳ ಏರಿಕೆಯೊಂದಿಗೆ, ಯಾವುದೇ ವೆಬ್ ಡಿಸೈನರ್ ಚೀಲಗಳಲ್ಲಿ ಟ್ರಿಕ್ಸ್ ಇನ್ನೂ ಸ್ಥಾನ ಪಡೆದಿದೆ.

ಸಿಎಸ್ಎಸ್ ಸ್ಥಾನೀಕರಣವನ್ನು ಬಳಸುವಾಗ, ನೀವು ನೀಡಬೇಕಾದ ಮೊದಲ ವಿಷಯವೆಂದರೆ ನೀವು ನೀಡಿದ ಅಂಶಕ್ಕಾಗಿ ಸಂಪೂರ್ಣ ಅಥವಾ ಸಂಬಂಧಿತ ಸ್ಥಾನಗಳನ್ನು ಬಳಸುವುದಾದರೆ ಬ್ರೌಸರ್ಗೆ ಹೇಳಲು ಸ್ಥಾನಮಾನಕ್ಕಾಗಿ CSS ಆಸ್ತಿಯನ್ನು ಸ್ಥಾಪಿಸಿ. ಈ ಎರಡು ಸ್ಥಾನಗಳ ನಡುವಿನ ವ್ಯತ್ಯಾಸವನ್ನು ನೀವು ಸ್ಪಷ್ಟವಾಗಿ ಅರ್ಥ ಮಾಡಿಕೊಳ್ಳಬೇಕು.

ಸಂಪೂರ್ಣ ಮತ್ತು ಸಂಬಂಧಿತವಾದ ಎರಡು ಸಿಎಸ್ಎಸ್ ಸ್ಥಾನ ಗುಣಲಕ್ಷಣಗಳು ಹೆಚ್ಚಾಗಿ ವೆಬ್ ವಿನ್ಯಾಸದಲ್ಲಿ ಬಳಸಲ್ಪಟ್ಟಿವೆಯಾದರೂ, ವಾಸ್ತವವಾಗಿ ನಾಲ್ಕು ರಾಜ್ಯಗಳು ಆಸ್ತಿಯ ಆಸ್ತಿಗೆ ಇವೆ:

• ಸ್ಥಿರ
• ಸಂಪೂರ್ಣ
• ಸಂಬಂಧಿ
• ಪರಿಹರಿಸಲಾಗಿದೆ

ವೆಬ್ ಪುಟದಲ್ಲಿನ ಯಾವುದೇ ಅಂಶಕ್ಕೆ ಸ್ಥಿರವಾದ ಸ್ಥಾನಮಾನವಾಗಿರುತ್ತದೆ. ನೀವು ಅಂಶದ ಸ್ಥಿತಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸದಿದ್ದರೆ, ಅದು ಸ್ಥಿರವಾಗಿರುತ್ತದೆ. ಇದು ಎಚ್ಟಿಎಮ್ಎಲ್ ದಸ್ತಾವೇಜು ಎಲ್ಲಿದೆ ಮತ್ತು ಅದು ಆ ಡಾಕ್ಯುಮೆಂಟ್ನ ಸಾಮಾನ್ಯ ಹರಿವಿನೊಳಗೆ ಹೇಗೆ ಪ್ರದರ್ಶಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಆಧರಿಸಿ ಪರದೆಯ ಮೇಲೆ ಅದು ಪ್ರದರ್ಶಿಸುತ್ತದೆ ಎಂದರ್ಥ.

ಸ್ಥಿರ ಸ್ಥಿತಿಯನ್ನು ಹೊಂದಿರುವ ಅಂಶಕ್ಕೆ ಮೇಲಿನ ಅಥವಾ ಎಡಕ್ಕೆ ಹೋಲಿಕೆ ನಿಯಮಗಳನ್ನು ನೀವು ಅನ್ವಯಿಸಿದರೆ, ಆ ನಿಯಮಗಳನ್ನು ನಿರ್ಲಕ್ಷಿಸಲಾಗುವುದು ಮತ್ತು ಸಾಮಾನ್ಯ ಡಾಕ್ಯುಮೆಂಟ್ ಹರಿವು ಕಾಣಿಸಿಕೊಳ್ಳುವ ಅಂಶವು ಉಳಿಯುತ್ತದೆ. ಸತ್ಯದಲ್ಲಿ, ನೀವು ಅಪರೂಪವಾಗಿ, ಎಂದಾದರೂ, CSS ನಲ್ಲಿ ಒಂದು ಸ್ಥಿರ ಸ್ಥಾನಕ್ಕೆ ಒಂದು ಅಂಶವನ್ನು ಹೊಂದಿಸಬೇಕಾದ ಕಾರಣ ಅದು ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವಾಗಿರುತ್ತದೆ.

ಸಂಪೂರ್ಣ ಸಿಎಸ್ಎಸ್ ಸ್ಥಾನೀಕರಣ

ಸಂಪೂರ್ಣ ಸ್ಥಾನೀಕರಣ ಬಹುಶಃ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸುಲಭವಾದ ಸಿಎಸ್ಎಸ್ ಸ್ಥಾನವಾಗಿದೆ. ನೀವು ಈ ಸಿಎಸ್ಎಸ್ ಸ್ಥಾನವನ್ನು ಆಸ್ತಿಯೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಿ:

ಸ್ಥಾನ: ಸಂಪೂರ್ಣ;

ಈ ಮೌಲ್ಯವು ಬ್ರೌಸರ್ನಲ್ಲಿ ಹೇಳುವುದಾದರೆ, ಸ್ಥಾನದಲ್ಲಿರುವ ಯಾವುದೇ ಏನನ್ನಾದರೂ ಡಾಕ್ಯುಮೆಂಟ್ನ ಸಾಮಾನ್ಯ ಹರಿವಿನಿಂದ ತೆಗೆದುಹಾಕಬೇಕು ಮತ್ತು ಬದಲಿಗೆ ಪುಟದಲ್ಲಿ ನಿಖರ ಸ್ಥಳದಲ್ಲಿ ಇರಿಸಬೇಕು. ಆ ಅಂಶದ ಹತ್ತಿರದ ಅಲ್ಲದ ಸ್ಥಿರವಾಗಿ ಸ್ಥಾನದಲ್ಲಿರುವ ಪೂರ್ವಿಕರ ಆಧಾರದ ಮೇಲೆ ಇದನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲಾಗುತ್ತದೆ.

ಡಾಕ್ಯುಮೆಂಟ್ನ ಸಾಮಾನ್ಯ ಹರಿವಿನಿಂದ ಸಂಪೂರ್ಣವಾಗಿ ಸ್ಥಾನ ಪಡೆದಿರುವ ಅಂಶವನ್ನು ತೆಗೆದುಕೊಂಡ ಕಾರಣ, ಅದು ಮೊದಲು ಅಥವಾ ಅದರ ನಂತರದ ಅಂಶಗಳು ವೆಬ್ ಪುಟದಲ್ಲಿ ಹೇಗೆ ಇರುತ್ತಾರೆ ಎಂಬುದನ್ನು ಇದು ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ.

ಉದಾಹರಣೆಯಾಗಿ - ನೀವು ಸಂಬಂಧಿ ಮೌಲ್ಯವನ್ನು ಬಳಸಿಕೊಂಡು ಸ್ಥಾನದಲ್ಲಿದ್ದ ವಿಭಾಗವನ್ನು ಹೊಂದಿದ್ದರೆ (ನಾವು ಈ ಮೌಲ್ಯವನ್ನು ಶೀಘ್ರದಲ್ಲೇ ನೋಡುತ್ತೇವೆ) ಮತ್ತು ವಿಭಾಗದಲ್ಲಿ ನೀವು ಪ್ಯಾರಾಗ್ರಾಫ್ ಅನ್ನು ಹೊಂದಿದ್ದೀರಿ, ನೀವು ವಿಭಾಗದ ಮೇಲ್ಭಾಗದಿಂದ 50 ಪಿಕ್ಸೆಲ್ಗಳನ್ನು ಸ್ಥಾನಪಡೆದುಕೊಳ್ಳಲು ಬಯಸಿದ್ದೀರಿ, ಈ ಪ್ಯಾರಾಗ್ರಾಫ್ಗೆ "ಸಂಪೂರ್ಣ" ಸ್ಥಾನ ಮೌಲ್ಯವನ್ನು ಸೇರಿಸುತ್ತದೆ ಮತ್ತು ಇದರಂತೆ "ಉನ್ನತ" ಆಸ್ತಿಯ ಮೇಲೆ 50px ಆಫ್ಸೆಟ್ ಮೌಲ್ಯವನ್ನು ಸೇರಿಸುತ್ತದೆ.

ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಉನ್ನತ: 50px;

ಈ ಸಂಪೂರ್ಣವಾಗಿ ಸ್ಥಾನದಲ್ಲಿರುವ ಅಂಶವು ಯಾವಾಗಲೂ ಆ ಸ್ಥಾನದಲ್ಲಿರುವ ವಿಭಾಗದ ಮೇಲ್ಭಾಗದಿಂದ 50 ಪಿಕ್ಸೆಲ್ಗಳನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ - ಸಾಮಾನ್ಯ ಹರಿವಿನಲ್ಲಿ ಬೇರೆ ಏನು ತೋರಿಸುತ್ತದೆಯಾದರೂ. ನಿಮ್ಮ "ಸಂಪೂರ್ಣವಾಗಿ" ಸ್ಥಾನದಲ್ಲಿರುವ ಅಂಶವು ತುಲನಾತ್ಮಕವಾಗಿ ಸ್ಥಾನದಲ್ಲಿರುವ ಅದರ ಸನ್ನಿವೇಶದಂತೆ ಬಳಸಿದೆ ಮತ್ತು ನೀವು ಬಳಸುವ ಧನಾತ್ಮಕ ಮೌಲ್ಯವು ಇದಕ್ಕೆ ಸಂಬಂಧಿಸಿದೆ.

ನೀವು ಬಳಸಲು ಲಭ್ಯವಿರುವ ನಾಲ್ಕು ಸ್ಥಾನಿಕ ಗುಣಲಕ್ಷಣಗಳು ಹೀಗಿವೆ:

• ಅಗ್ರ
• ಸರಿ
• ಕೆಳಗೆ
• ಎಡಕ್ಕೆ

ನೀವು ಮೇಲ್ಭಾಗ ಅಥವಾ ಕೆಳಭಾಗವನ್ನು ಬಳಸಬಹುದು (ಒಂದು ಅಂಶವನ್ನು ಈ ಎರಡೂ ಮೌಲ್ಯಗಳ ಪ್ರಕಾರ ಇರಿಸಲಾಗುವುದಿಲ್ಲ) ಮತ್ತು ಬಲ ಅಥವಾ ಎಡ.

ಒಂದು ಅಂಶವನ್ನು ಸಂಪೂರ್ಣವಾದ ಸ್ಥಾನಕ್ಕೆ ಹೊಂದಿಸಿದರೆ, ಅದು ಅಲ್ಲಿ ಪೂರ್ವನಿರ್ಮಿತವಾಗಿಲ್ಲದ ಪೂರ್ವಜರನ್ನು ಹೊಂದಿಲ್ಲವಾದರೆ, ಅದು ದೇಹದ ಅಂಶಕ್ಕೆ ಸಂಬಂಧಿಸಿರುತ್ತದೆ, ಅದು ಪುಟದ ಅತ್ಯುನ್ನತ ಮಟ್ಟದ ಅಂಶವಾಗಿದೆ.

ಸಂಬಂಧಿತ ಸ್ಥಾನೀಕರಣ

ನಾವು ಈಗಾಗಲೇ ಸಂಬಂಧಿತ ಸ್ಥಾನಿಕವನ್ನು ಉಲ್ಲೇಖಿಸಿದ್ದೇವೆ, ಆದ್ದರಿಂದ ಈಗ ಆ ಆಸ್ತಿ ನೋಡೋಣ.

ಸಂಬಂಧಿಕ ಸ್ಥಾನಿಕ ಸ್ಥಾನವು ಸಂಪೂರ್ಣ ಸ್ಥಾನೀಕರಣದಂತೆಯೇ ಅದೇ ನಾಲ್ಕು ಸ್ಥಾನಿಕ ಗುಣಗಳನ್ನು ಬಳಸುತ್ತದೆ, ಆದರೆ ಅದರ ನಿಕಟ ಸ್ಥಿತಿಯಲ್ಲದ ಸ್ಥಿತಿಯ ಸ್ಥಾನದಲ್ಲಿರುವ ಪೂರ್ವಿಕರ ಮೇಲೆ ಅಂಶದ ಸ್ಥಾನವನ್ನು ಬೇರ್ಪಡಿಸುವ ಬದಲು, ಇದು ಸಾಮಾನ್ಯ ಹರಿವಿನಲ್ಲಿ ಇರುವಾಗ ಅಂಶ ಎಲ್ಲಿಂದಲಾದರೂ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ.

ಉದಾಹರಣೆಗೆ, ನಿಮ್ಮ ವೆಬ್ ಪುಟದಲ್ಲಿ ನೀವು ಮೂರು ಪ್ಯಾರಾಗಳನ್ನು ಹೊಂದಿದ್ದರೆ, ಮತ್ತು ಮೂರನೇ ಅದರಲ್ಲಿ "ಸ್ಥಾನ: ಸಂಬಂಧಿತ" ಶೈಲಿಯನ್ನು ಹೊಂದಿದ್ದರೆ, ಅದರ ಸ್ಥಾನವು ಪ್ರಸ್ತುತ ಸ್ಥಳವನ್ನು ಆಧರಿಸಿ ಆಫ್ಸೆಟ್ ಆಗುತ್ತದೆ.

ಪ್ಯಾರಾಗ್ರಾಫ್ 1.

ಪ್ಯಾರಾಗ್ರಾಫ್ 2.

ಪ್ಯಾರಾಗ್ರಾಫ್ 3.

ಮೇಲಿನ ಉದಾಹರಣೆಯಲ್ಲಿ, ಮೂರನೆಯ ಪ್ಯಾರಾಗ್ರಾಫ್ ಕಂಟೇನರ್ ಎಲಿಮೆಂಟ್ನ ಎಡಭಾಗದಿಂದ 2em ಸ್ಥಾನದಲ್ಲಿರುತ್ತದೆ, ಆದರೆ ಇನ್ನೂ ಮೊದಲ ಎರಡು ಪ್ಯಾರಾಗಳು ಕೆಳಗಿರುತ್ತದೆ. ಇದು ಡಾಕ್ಯುಮೆಂಟ್ನ ಸಾಮಾನ್ಯ ಹರಿವಿನಲ್ಲಿ ಉಳಿಯುತ್ತದೆ, ಮತ್ತು ಸ್ವಲ್ಪವೇ ಆಫ್ಸೆಟ್ ಆಗಿರುತ್ತದೆ. ನೀವು ಇದನ್ನು ಸ್ಥಾನಕ್ಕೆ ಬದಲಾಯಿಸಿದರೆ: ಸಂಪೂರ್ಣ; ಅದು ಅದರ ಮೇಲೆ ಪ್ರದರ್ಶಿಸುವುದನ್ನು ಅನುಸರಿಸಿ, ಏಕೆಂದರೆ ಇದು ಡಾಕ್ಯುಮೆಂಟ್ನ ಸಾಮಾನ್ಯ ಹರಿವಿನಲ್ಲಿ ಇರುವುದಿಲ್ಲ.

ವೆಬ್ ಪುಟದಲ್ಲಿನ ಎಲಿಮೆಂಟ್ಸ್ ಸಾಮಾನ್ಯವಾಗಿ ಸ್ಥಾನದ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ: ಯಾವುದೇ ಆಫ್ಸೆಟ್ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿರದಂತೆ ಸ್ಥಾಪಿಸಲಾಗಿದೆ, ಇದರರ್ಥ ಸಾಮಾನ್ಯ ಹರಿವು ಕಾಣಿಸಿಕೊಳ್ಳುವ ಅಂಶವು ನಿಖರವಾಗಿ ಉಳಿಯುತ್ತದೆ. ಆ ಅಂಶವನ್ನು ಒಂದು ಸನ್ನಿವೇಶವಾಗಿ ಸ್ಥಾಪಿಸಲು ಮಾತ್ರ ಇದನ್ನು ಮಾಡಲಾಗುತ್ತದೆ, ಅದರ ವಿರುದ್ಧ ಇತರ ಅಂಶಗಳು ಸಂಪೂರ್ಣವಾಗಿ ಇರುತ್ತಾರೆ. ಉದಾಹರಣೆಗೆ, ನಿಮ್ಮ ಇಡೀ ವೆಬ್ಸೈಟ್ ಅನ್ನು "ಕಂಟೇನರ್" ನ ವರ್ಗ ಮೌಲ್ಯದೊಂದಿಗೆ (ಇದು ವೆಬ್ ವಿನ್ಯಾಸದಲ್ಲಿ ಅತ್ಯಂತ ಸಾಮಾನ್ಯವಾದ ಸನ್ನಿವೇಶದಲ್ಲಿ) ಹೊಂದಿರುವ ಒಂದು ವಿಭಾಗವನ್ನು ಹೊಂದಿದ್ದರೆ, ಆ ವಿಭಾಗವನ್ನು ಸಂಬಂಧಿತವಾದ ಸ್ಥಾನಕ್ಕೆ ಹೊಂದಿಸಬಹುದಾಗಿದೆ, ಇದರಿಂದ ಅದರ ಒಳಗೆ ಏನಾದರೂ ಬಳಸಬಹುದು ಇದು ಸ್ಥಾನಿಕ ಸನ್ನಿವೇಶವಾಗಿ.

ಸ್ಥಿರ ಸ್ಥಾನೀಕರಣ ಬಗ್ಗೆ ಏನು?

ಸ್ಥಿರ ಸ್ಥಾನೀಕರಣ ಸಂಪೂರ್ಣ ಸ್ಥಾನಿಕ ರೀತಿಯ ಬಹಳಷ್ಟು ಆಗಿದೆ. ಅಂಶದ ಸ್ಥಾನವು ಸಂಪೂರ್ಣ ಮಾದರಿಯ ರೀತಿಯಲ್ಲಿಯೇ ಲೆಕ್ಕಹಾಕಲ್ಪಡುತ್ತದೆ, ಆದರೆ ಸ್ಥಿರವಾದ ಅಂಶಗಳು ಆ ಜಾಗದಲ್ಲಿ ಸ್ಥಿರವಾಗಿರುತ್ತವೆ - ಬಹುತೇಕ ನೀರುಗುರುತುಗಳಂತೆ . ಪುಟದಲ್ಲಿರುವ ಉಳಿದವು ಆ ಅಂಶವನ್ನು ಹಿಂದೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುತ್ತದೆ.

ಈ ಆಸ್ತಿ ಮೌಲ್ಯವನ್ನು ಬಳಸಲು, ನೀವು ಹೊಂದಿಸಬಹುದು:

ಸ್ಥಾನ: ಸ್ಥಿರ;

ನೆನಪಿಡಿ, ನಿಮ್ಮ ಸೈಟ್ನಲ್ಲಿ ನೀವು ಒಂದು ಅಂಶವನ್ನು ಸರಿಪಡಿಸಿದಾಗ, ಅದು ನಿಮ್ಮ ವೆಬ್ ಪುಟವನ್ನು ಮುದ್ರಿಸಿದಾಗ ಅದು ಆ ಸ್ಥಳದಲ್ಲಿ ಮುದ್ರಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ನಿಮ್ಮ ಅಂಶವು ನಿಮ್ಮ ಪುಟದ ಮೇಲ್ಭಾಗದಲ್ಲಿ ಸ್ಥಿರವಾಗಿದ್ದರೆ, ಅದು ಪ್ರತಿ ಮುದ್ರಿತ ಪುಟದ ಮೇಲ್ಭಾಗದಲ್ಲಿ ಕಾಣಿಸುತ್ತದೆ - ಏಕೆಂದರೆ ಅದು ಪುಟದ ಮೇಲ್ಭಾಗಕ್ಕೆ ಸ್ಥಿರವಾಗಿದೆ. ಮುದ್ರಿತ ಪುಟಗಳು ಸ್ಥಿರ ಅಂಶಗಳನ್ನು ಹೇಗೆ ಪ್ರದರ್ಶಿಸುತ್ತವೆ ಎಂಬುದನ್ನು ಬದಲಾಯಿಸಲು ಮಾಧ್ಯಮ ಪ್ರಕಾರಗಳನ್ನು ನೀವು ಬಳಸಬಹುದು:

@media ಸ್ಕ್ರೀನ್ {h1 # ಮೊದಲ {ಸ್ಥಾನ: ಸ್ಥಿರ; }} @ ಮಾಧ್ಯಮ ಮುದ್ರಣ {h1 # ಮೊದಲ {ಸ್ಥಾನವನ್ನು: ಸ್ಥಿರ; }}

ಜೆನ್ನಿಫರ್ ಕ್ರಿನಿನ್ರಿಂದ ಮೂಲ ಲೇಖನ. 1/7/16 ರಂದು ಜೆರೆಮಿ ಗಿರಾರ್ಡ್ರಿಂದ ಸಂಪಾದಿಸಲಾಗಿದೆ.