ಸ್ಥಾನ ಸಂಬಂಧಿ - ಅದು ಏನು? ವಿವರವಾದ ವಿವರಣೆ

ಎಚ್ಟಿಎಮ್ಎಲ್ ವಿನ್ಯಾಸವು ಸುದೀರ್ಘ ಪ್ರಕ್ರಿಯೆ, ಚಾಕಚಕ್ಯತೆ, ಆದರೆ ಬಹಳ ಸೃಜನಾತ್ಮಕವಾಗಿದೆ. ಐಟಿ ಕ್ಷೇತ್ರದಲ್ಲಿ ಕೆಲಸಮಾಡುವ ಹೆಚ್ಚಿನ ಜನರಿಗೆ, ವೆಬ್ ಪುಟಗಳ ವಿನ್ಯಾಸವು ನೀರಸ ನಿಯಮದಂತೆ ತೋರುತ್ತದೆಯಾದರೂ, ಅಂತಹ ವಿಷಯಕ್ಕೆ ಸಂಬಂಧಿಸಿದಂತೆ ಪರಿಣತರು ಗುಣಾತ್ಮಕವಾಗಿ ಕಾರ್ಯಗಳನ್ನು ನಿರ್ವಹಿಸದೆ, ಆದರೆ ಪ್ರಕ್ರಿಯೆಯಿಂದ ಸ್ಪಷ್ಟವಾದ ಆನಂದವನ್ನು ಪಡೆದುಕೊಳ್ಳುತ್ತಾರೆ.

ಆದಾಗ್ಯೂ, ಒಬ್ಬ ಅನುಭವಿ ವೆಬ್ ಡಿಸೈನರ್ ಆಗುವ ಮೊದಲು, ಪ್ರತಿ ಹೊಸಬಿಯು HTML ಭಾಷೆ ಮತ್ತು ಅದರ ಮಿತ್ರ ಸಿಎಸ್ಎಸ್ ಎರಡಕ್ಕೂ ವಿವಿಧ ಸೂಚನೆಗಳನ್ನು ಮತ್ತು ವಿಶೇಷಣಗಳನ್ನು ಕಲಿಯುವ ಸಮಯವನ್ನು ಕಳೆಯುತ್ತದೆ. ಪೊಸಿಸ್ ರಿಲೇಟಿವ್ - ನಾವು ಇಂದು ಮಾತಾಡುತ್ತೇವೆ - ಇದು ಸಿಎಸ್ಎಸ್ ಏನು, ಅದು ಏನು ಮತ್ತು "ಕಿವಿಗಳೊಂದಿಗೆ ಫೀಂಟ್ಗಳು" ನೀವು ಪಡೆಯಲು ಅನುಮತಿಸುತ್ತದೆ, ಮತ್ತು ಅದರ ಜನಪ್ರಿಯ ಗುಣಗಳ ಬಗ್ಗೆ ಸಹ.

ಸಿಎಸ್ಎಸ್ ಎಂದರೇನು?

ಸಂಕ್ಷಿಪ್ತ ಸಿಎಸ್ಎಸ್ ಅನ್ನು ಡಿಸ್ಕ್ರಿಪ್ಟರ್ ಮಾಡಬಹುದು ಮತ್ತು ರಷ್ಯಾದ ಭಾಷೆಗೆ "ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್ಸ್" ಎಂದು ಅನುವಾದಿಸಬಹುದು. ಇದು ಸ್ವಲ್ಪ ವಿಚಿತ್ರವಾದದ್ದು - ಒಂದೆಡೆ, ಪದಗಳಂತೆ ಮತ್ತು ಅರ್ಥವಾಗುವಂತಹದ್ದಾಗಿರುತ್ತದೆ, ಆದರೆ ಇನ್ನೊಂದರ ಮೇಲೆ - ಸಾಮಾನ್ಯ ಅರ್ಥವನ್ನು ಒಮ್ಮೆಗೇ ಸಿಕ್ಕಿಹಾಕಲಾಗುವುದಿಲ್ಲ. ಶೈಲಿಗಳೊಂದಿಗೆ - ಸರಳವಾಗಿ ಪ್ರಾರಂಭಿಸೋಣ. ಈ ತಂತ್ರಜ್ಞಾನವು ಗೋಚರಿಸುವಿಕೆಗೆ ಸಂಬಂಧಿಸಿದ ಕೆಲವು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಪುಟಗಳಲ್ಲಿ ವಸ್ತುಗಳನ್ನು ನೀಡಲು ಅನುಮತಿಸುತ್ತದೆ, ಅದನ್ನು ಒಮ್ಮೆ ಮಾತ್ರ ಸೂಚಿಸಬಹುದು, ಆದರೆ ಅನಂತ ಸಂಖ್ಯೆಯ ಬಾರಿ ಬಳಸಬಹುದಾಗಿದೆ.

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

ಅಂತಿಮವಾಗಿ, "ಕ್ಯಾಸ್ಕೇಡ್" ಎಂಬ ಪದ. ವಾಸ್ತವವಾಗಿ, ಪ್ರತಿಯೊಂದು ಅಂಶವೂ ಒಂದೇ ಬಾರಿಗೆ ಅನೇಕ ಶೈಲಿಗಳನ್ನು ಹೊಂದಬಹುದು, ಅದು ಮಿಶ್ರಣವಾಗಬಹುದು ಅಥವಾ ಛೇದಿಸಬಹುದು. ಅಂತಹ ಸಂದರ್ಭಗಳಲ್ಲಿ, ಬ್ರೌಸರ್ ಹಲವಾರು ನಿಯಮಗಳನ್ನು ಅವಲಂಬಿಸಬೇಕಾಗಿದೆ, ಬ್ಲಾಕ್ನ ನೋಟವನ್ನು ಸರಿಯಾಗಿ ಸಂಯೋಜಿಸಲು, ಅವುಗಳಲ್ಲಿ ಒಂದನ್ನು ಹೊಂದಿದ್ದು, ಉದಾಹರಣೆಗೆ, ಪೊಸಿಸ್ ರಿಲೇಟಿವ್ನ ಆಸ್ತಿ ಮತ್ತು ಇತರವು - ಪೊಸಿಷನ್ ಸಂಪೂರ್ಣ. ವಾಸ್ತವವಾಗಿ, ಅಂತಹ ಘರ್ಷಣೆಯನ್ನು ತಡೆದುಕೊಳ್ಳಲಾಗುವುದಿಲ್ಲ, ಆದರೆ ದೊಡ್ಡ ಯೋಜನೆಗಳಲ್ಲಿ ಅಂತಹ ಗೊಂದಲವು ಹೆಚ್ಚಾಗಿ ಕಂಡುಬರುತ್ತದೆ.

ಆದ್ದರಿಂದ, ಈಗ ಹೆಸರು ಸ್ಪಷ್ಟವಾಗಿದೆ, ನಾವು ಒಂದು ಸರಳ ಉದಾಹರಣೆ ನೋಡೋಣ. ನಿಮ್ಮ ವೆಬ್ಸೈಟ್ನಲ್ಲಿನ ಒಂದು ದೊಡ್ಡ ಸಂಖ್ಯೆಯ ಗುಂಡಿಗಳನ್ನು ನೀವು ಹೊಂದಿದ್ದೀರಿ ಎಂದು ನಿರ್ದಿಷ್ಟ ರೀತಿಯಲ್ಲಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಅವುಗಳ ಗಾತ್ರ, ನೆರಳು, ಪಾರದರ್ಶಕತೆ, ಬಣ್ಣ ಮುಂತಾದ ಗುಣಗಳನ್ನು ಹೊಂದಿರುತ್ತವೆ. ಸಹಜವಾಗಿ, ನೀವು ಈ ಪ್ಯಾರಾಮೀಟರ್ಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು, ಪ್ರತಿ ಗುಂಡಿಯನ್ನು ರಚಿಸಬಹುದು, ಆದರೆ ಅದು ಸಿಎಸ್ಎಸ್ ಅನ್ನು ಬಳಸಲು ಸುಲಭವಾಗುತ್ತದೆ. ಆಚರಣೆಯಲ್ಲಿ, ಮೇಲಿನ ಎಲ್ಲಾ ಗುಣಲಕ್ಷಣಗಳ ಮೌಲ್ಯಗಳನ್ನು ಪಟ್ಟಿ ಮಾಡಲಾಗುವುದು, ಮತ್ತು ನಂತರ, ಸುದೀರ್ಘವಾದ ಪರಿಮಾಣದ ಬದಲಿಗೆ, ಪ್ರತಿ ಗುಂಡಿಯ ಟ್ಯಾಗ್ ಈ ವರ್ಗದ ಹೆಸರನ್ನು ಮಾತ್ರ ನಿರ್ದಿಷ್ಟಪಡಿಸಬೇಕಾಗಿದೆ, ಅದರ ನಂತರ ಬ್ರೌಸರ್ ಅಗತ್ಯವಿರುವ ಬಣ್ಣಗಳಲ್ಲಿ ಈ ಅಂಶಗಳನ್ನು ಚಿತ್ರಿಸುತ್ತದೆ ಮತ್ತು ಅವುಗಳನ್ನು ಸೂಕ್ತವಾದ ರೀತಿಯಲ್ಲಿ ನೀಡುತ್ತದೆ "ಗ್ಲಾಸ್".

ಪೊಸಿಷನ್ ಆಸ್ತಿ ನನಗೆ ಏಕೆ ಬೇಕು?

ಈಗ ನೇರವಾಗಿ ಪೊಸಿಷನ್ ಆಸ್ತಿಗೆ ಚಲಿಸೋಣ, ಇದಕ್ಕಾಗಿ ಇಡೀ ಲೇಖನವನ್ನು ಕಲ್ಪಿಸಲಾಗಿದೆ. ನೀವು ಇಂಗ್ಲಿಷ್ಗೆ ತಿಳಿದಿದ್ದರೆ ಅಥವಾ ಉತ್ತಮ ಒಳನೋಟವನ್ನು ಹೊಂದಿದ್ದರೆ, ನೀವು ಈಗಾಗಲೇ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬೇಕು - ಅಂಶದ ಸ್ಥಳಕ್ಕೆ ಈ ಆಸ್ತಿ ಕಾರಣವಾಗಿದೆ. ವಾಸ್ತವವಾಗಿ, ಅದು ಒಂದು ನಿರ್ದಿಷ್ಟ ಸ್ಥಳವನ್ನು ವಿವರಿಸುವ ಬದಲು, ನೆರೆಹೊರೆಯ ಅಥವಾ ಇಡೀ ಪುಟಕ್ಕೆ ಸಂಬಂಧಿಸಿದಂತೆ ಒಂದು ಐಟಂ ಅನ್ನು ನಿಖರವಾಗಿ ಇರಿಸಲು ಹೇಗೆ ಈ ಆಸ್ತಿ ಬ್ರೌಸರ್ಗೆ ಹೇಳುತ್ತದೆ.

ಪೊಸಿಷನ್ ಆಸ್ತಿ ಏನು ಮೌಲ್ಯಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಬಹುದು?

ನಮ್ಮ ಆಸ್ತಿ ಹಲವಾರು ಮೌಲ್ಯಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಬಹುದು, ಅವುಗಳಲ್ಲಿ ಕೇವಲ ಐದು ಮಾತ್ರ. ಪ್ರತಿಯೊಂದರಲ್ಲಿ ಸಂಕ್ಷಿಪ್ತ ವಿವರಣೆಯನ್ನು ಇಲ್ಲಿ ನೀಡಲಾಗಿದೆ:

• ಸ್ಥಾನವನ್ನು ಪಡೆದುಕೊಳ್ಳಿ. ಈ ಗುಣಲಕ್ಷಣವು ಮೂಲದ ಐಟಂನ ಡೇಟಾವನ್ನು ನಕಲಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ನಿಗದಿತ ಪೊಸಿಷನ್ ರಿಲೇಟಿವ್ನೊಂದಿಗೆ ನೀವು ಡಿವಿಯನ್ನು ಹೊಂದಿದ್ದರೆ, ನಂತರ ಆನುವಂಶಿಕ ಮೌಲ್ಯದೊಂದಿಗೆ ಕೆತ್ತಿದ IMG ಸಹ ಮೌಲ್ಯ ಸಂಬಂಧಿಯನ್ನು ಪಡೆಯುತ್ತದೆ.
• ಸ್ಥಾನ ಸ್ಥಾಯೀ. ಇಲ್ಲದಿದ್ದರೆ ನಿರ್ದಿಷ್ಟಪಡಿಸದ ಹೊರತು ಈ ಮೌಲ್ಯವನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಎಲ್ಲಾ ಅಂಶಗಳಿಗೆ ನೀಡಲಾಗುತ್ತದೆ. ಘಟಕದಲ್ಲಿ ಅವರು ಕೋಡ್ನಲ್ಲಿ ಉಲ್ಲೇಖಿಸಲ್ಪಟ್ಟಿರುವುದರಿಂದ ಸ್ಥಾನಕ್ಕೆ ಸರಿಹೊಂದುವುದಿಲ್ಲ ಮತ್ತು ಅವುಗಳು ತಮ್ಮ ಸ್ಥಾನವನ್ನು ಬದಲಿಸಲು ಅನುಮತಿಸುವ ವಿವಿಧ "ಭಕ್ಷ್ಯಗಳಿಗೆ" ಲಭ್ಯವಿಲ್ಲ.
• ಪೊಸಿಷನ್ ಸಂಪೂರ್ಣ. ಪೊಸಿಷನ್ ಆಸ್ತಿಯ ಈ ಮೌಲ್ಯವನ್ನು ಸಾಮಾನ್ಯವಾಗಿ "ಫ್ಲೋಟಿಂಗ್" ಎಲಿಮೆಂಟ್ ರಚಿಸಲು ಅಗತ್ಯವಿರುವ ಸಂದರ್ಭಗಳಲ್ಲಿ ಬಳಸಲಾಗುತ್ತದೆ. ಈ ಆಸ್ತಿ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿರುವ, ಅಂಶ ಉಳಿದ ಪುಟಕ್ಕೆ "ಅಗೋಚರವಾಗಿ" ಉಳಿದಿದೆ. ಅಂದರೆ, ನಮ್ಮ ಸಂಪೂರ್ಣ ಅಂಶವು ಅಸ್ತಿತ್ವದಲ್ಲಿಲ್ಲವೆಂದು ಅವರು ನೆಲೆಗೊಂಡಿದ್ದಾರೆ. ಪುಟವು ಎಷ್ಟು ಸುರುಳಿಯಾಯಿತು ಎಂಬುದನ್ನು ಲೆಕ್ಕಿಸದೆ ಅವರು ಯಾವಾಗಲೂ ಸ್ಥಳದಲ್ಲಿಯೇ ಉಳಿಯುತ್ತಾರೆ.
• ಪೊಸಿಷನ್ ಪರಿಹರಿಸಲಾಗಿದೆ. ಅನೇಕ ವಿಧಗಳಲ್ಲಿ ಈ ಮೌಲ್ಯವು ಹಿಂದಿನದಕ್ಕೆ ಹೋಲುವಂತಿರುತ್ತದೆ, ಆದಾಗ್ಯೂ, ಮೂಲ ಅಂಶವು ಪೋಷಕರಿಗೆ ಜೋಡಿಸಲ್ಪಟ್ಟಿರುತ್ತದೆ, ಸ್ಥಿರವಾದ ಬ್ರೌಸರ್ ಪರದೆಯ ಮೇಲಿನ ಎಡ ಮೂಲೆಯಲ್ಲಿರುವ ಕಕ್ಷೆಗಳನ್ನು ಮಾತ್ರ ಬಳಸುತ್ತದೆ, ಅದು ಮುಂಚಿನ ಇತರ ಅಂಶಗಳಿಗೆ ಗಮನ ಕೊಡುವುದಿಲ್ಲ.
• ಅಂತಿಮವಾಗಿ, ಸ್ಥಾನ ಸಂಬಂಧಿ. ಈ ರೀತಿಯ ಮೌಲ್ಯವು ಇತರರಿಗೆ ಸಂಬಂಧಪಟ್ಟ ಅಂಶವನ್ನು ಸ್ಥಾನಪಲ್ಲಟಗೊಳಿಸಲು ನಿಮಗೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ, ಇದು ಸಾಮಾನ್ಯ ಜನರಲ್ಲಿ "ರಬ್ಬರ್" ಎಂದು ಕರೆಯಲಾಗುವ ಹೊಂದಾಣಿಕೆಯ ಮಾರ್ಕ್ಅಪ್ ಅನ್ನು ರಚಿಸುವಾಗ ಉಪಯುಕ್ತವಾಗಿದೆ. ಈ ಆಸ್ತಿ ಹೊಂದಿರುವ, ಅಂಶವು ಅದರ ಸ್ಥಳವನ್ನು ಬದಲಿಸುವ ಸಾಮರ್ಥ್ಯ ಕಳೆದುಕೊಳ್ಳದೆ, ಉಳಿದನ್ನು "ಬೇರೆಡೆಗೆ ತಿರುಗಿಸುತ್ತದೆ".

ವಿಭಿನ್ನ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಪೊಸಿಷನ್ ಹೊಂದಿರುವ ಕೆಲಸದ ವೈಶಿಷ್ಟ್ಯಗಳು

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

ಉದಾಹರಣೆಗೆ, ಈಗಾಗಲೇ ಸಮಾಧಿ IE6 ಬ್ರೌಸರ್ ಬಳಸಿ, ನೀವು ಸ್ಥಿರ ಮತ್ತು ಆನುವಂಶಿಕ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸಲು ಸಾಧ್ಯವಿಲ್ಲ - ಕತ್ತೆ ಅವುಗಳನ್ನು ನಿರ್ಲಕ್ಷಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಏಳನೇ ಆವೃತ್ತಿಯ ನಂತರ ಪರಿಸ್ಥಿತಿ ಸರಿಪಡಿಸಲು ಪ್ರಾರಂಭಿಸಿತು, ಮತ್ತು ಸ್ಥಿರವಾಗಿ ಈಗಾಗಲೇ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲಾಗುತ್ತಿದೆ, ಪ್ರತಿಯೊಬ್ಬರೂ ತನ್ನ ಎಂಟನೆಯ ರೂಪದಲ್ಲಿ ಮಾತ್ರ "ಇತರ ಬ್ರೌಸರ್ಗಳನ್ನು ಡೌನ್ಲೋಡ್ ಮಾಡಲು ಬ್ರೌಸರ್" ಇಷ್ಟಪಟ್ಟಿದ್ದಾರೆ ಎಂದು ವಾಸ್ತವವಾಗಿ ಹೊರತಾಗಿಯೂ.

ಒಪೆರಾ ಹೊರತುಪಡಿಸಿ, ಮೊದಲ ಆವೃತ್ತಿಯಿಂದ ಪೊಸಿಷನ್ ಅನ್ನು ಉಳಿದ ವಿಮರ್ಶಕರು ನಿಭಾಯಿಸುತ್ತಾರೆ, ಈ ಆಸ್ತಿಯ ಬೆಂಬಲವು ಅದರ 4 ವ್ಯತ್ಯಾಸಗಳಲ್ಲಿ, 90 ರ ದಶಕದ ಮಧ್ಯಭಾಗದಲ್ಲಿ ಬಿಡುಗಡೆಯಾಯಿತು.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನಲ್ಲಿ ಸ್ಥಾನದೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿದೆ

ವಾಸ್ತವವಾಗಿ, Javascript ನಲ್ಲಿ ಪೊಸಿಷನ್ ಆಸ್ತಿಯೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವುದು ಹೇಗೆ ಎಂಬ ಕಥೆಯನ್ನು ನಾವು ಯೋಗ್ಯತೆಗಾಗಿ ಮಾತ್ರ ಸೇರಿಸಿದ್ದೇವೆ. ಈ ಆಸ್ತಿ ಹೆಸರಿನಲ್ಲಿ ಯಾವುದೇ ವಿಶೇಷ ಅಕ್ಷರಗಳನ್ನು ಹೊಂದಿಲ್ಲದ ಕಾರಣ, ನೀವು ಯಾವುದೇ ಬದಲಾವಣೆಗಳಿಲ್ಲದೆ ಉಪಯೋಗಗಳನ್ನು ಬಳಸಬಹುದು, ಉದಾಹರಣೆಗೆ, ಪೊಸಿಷನ್ ರಿಲೇಟಿವ್ ಡಿವಿ ಹೊಂದಿಸಲು, ನೀವು ಈ ಸಾಲನ್ನು ಒಳಗೊಂಡಿರಬೇಕು: div.style.position = 'relative'.

ನೀವು ನೋಡುವಂತೆ, ಎಲ್ಲವೂ ತುಂಬಾ ಸರಳವಾಗಿದೆ.

ಸ್ಥಾನ ಸಂಬಂಧಿ ಏಕೆ ವಿಶೇಷ ಗಮನಕ್ಕೆ ಅರ್ಹವಾಗಿದೆ?

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

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

ನಾನು ಸಂಬಂಧಿತ ಸ್ಥಾನಿಕವನ್ನು ಯಾವಾಗ ಬಳಸಬೇಕು?

ಸಾಂಪ್ರದಾಯಿಕ HTML ಪುಟಗಳ ವಿನ್ಯಾಸದ ಜೊತೆಗೆ, ಪೊಸಿಷನ್ ರಿಲೇಟಿವ್ ಅನ್ನು ಹಲವು ಬಾರಿ ವಿವಿಧ ಆಸಕ್ತಿದಾಯಕ ಪರಿಣಾಮಗಳನ್ನು ರಚಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ನೀವು ಒಂದು ಪುಟಕ್ಕೆ "ಬರಲು" ಒಂದು ಅಂಶವನ್ನು ಬಯಸಿದರೆ ಅಥವಾ, ಅದರಂತೆ, ಅದರ ಅಂಚುಗಳಿಗೆ ಸಲೀಸಾಗಿ ಹೋಗಿ, ಈ ಆಸ್ತಿಯು ಈ "ಫೀಂಟ್" ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಇದೇ ರೀತಿಯ "ಟ್ರಿಕ್ಸ್" ಅನ್ನು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಜಾರಿಗೊಳಿಸಲಾಗಿದೆ ಅಥವಾ ನೀವು ಪ್ರಗತಿಶೀಲ ವಿನ್ಯಾಸಕ್ಕಾಗಿ ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೆ, CSS3 ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ, ವೇರಿಯೇಬಲ್ನ ಮೌಲ್ಯದಲ್ಲಿ ಚಕ್ರ ಬದಲಾವಣೆಯನ್ನು ನೀವು ಕಾನ್ಫಿಗರ್ ಮಾಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

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

ಸಂಬಂಧಿತ ಸ್ಥಾನಗಳನ್ನು ಬಳಸುವ ಉದಾಹರಣೆಗಳು

ಪೊಸಿಷನ್ ರಿಲೇಟಿವ್ ಸರಳವಾದ ಇನ್ನೂ ಸುಲಭವಾಗಿರುತ್ತದೆ, ಇದು ನಿಮಗೆ ಅನೇಕ ಆಸಕ್ತಿದಾಯಕ ಪರಿಣಾಮಗಳನ್ನು ಜಾರಿಗೆ ತರಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಅನುಪಯುಕ್ತ ಟೆಂಪ್ಲೇಟ್ ಸಂಕೇತಗಳನ್ನು ಬರೆಯಲು ಸಮಯ ಮತ್ತು ಸ್ಥಳವನ್ನು ವ್ಯರ್ಥ ಮಾಡದಿರಲು, ನಿಮ್ಮ ಸೈಟ್ ಅಥವಾ ಅದರ ವೈಯಕ್ತಿಕ ಪುಟಗಳನ್ನು ಅಲಂಕರಿಸಬಹುದಾದ ಕೆಲವು ಮೌಖಿಕ ಕ್ರಮಾವಳಿಗಳನ್ನು ನಾವು ನೀಡುತ್ತೇವೆ.

"ರನ್ ಔಟ್" ಲೈನ್ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸೋಣ. ಪರದೆಯ ಎಡ ತುದಿಯ ಹಿಂಭಾಗದಿಂದ "ಪ್ರಯಾಣಿಸು" ಮತ್ತು ಕ್ರಮೇಣ ಅದರ ಬಲ ಭಾಗಕ್ಕೆ ಚಲಿಸುವ ಅಂಶವನ್ನು ನೀವು ಹೊಂದಿರುವಿರಿ ಎಂದು ಭಾವಿಸೋಣ. ಅಂತಹ "ಕಾರ್ಯವಿಧಾನ" ಯನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು, ನೀವು ಸ್ಥಾನವನ್ನು ಹೊಂದಿಸಬೇಕಾಗಿದೆ: ಸಂಬಂಧಿ; ಎಡ: -100px, ಅಲ್ಲಿ -100 ಬ್ಲಾಕ್ನ ಅಗಲವನ್ನು ಹೊಂದಿರುವ ಅಂದಾಜು ಪಿಕ್ಸೆಲ್ಗಳ ಸಂಖ್ಯೆ. ಈ ಶೈಲಿಯು ಪರದೆಯ ಹೊರಗಿರುವ ಬ್ಲಾಕ್ ಅನ್ನು ಮರೆಮಾಡಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಅದನ್ನು "ಪ್ರಾರಂಭದ ಸ್ಥಾನ" ಗೆ ಹೊಂದಿಸುತ್ತದೆ. ಈಗ ನೀವು ಬ್ರೌಸರ್ ವಿಂಡೋದ ಅಗಲಕ್ಕೆ ಸಮಾನವಾದ ತನಕ ಪ್ರತಿ ಕೆಲವು ಮಿಲಿಸೆಕೆಂಡುಗಳ ಎಡ ಆಸ್ತಿಯ ಮೌಲ್ಯವನ್ನು ಹೆಚ್ಚಿಸುವ ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಅಂಶದ ಅಗಲವನ್ನು ಕಡಿಮೆ ಮಾಡಬಹುದು. ಇದರ ಪರಿಣಾಮವಾಗಿ, ಎಡ ಅಂಚಿನ ಹಿಂದಿನಿಂದ ಕಾಣಿಸಿಕೊಳ್ಳುವ ಒಂದು ಬ್ಲಾಕ್ ಅನ್ನು ನಾವು ಪಡೆದುಕೊಳ್ಳುತ್ತೇವೆ, ಇಡೀ ಪರದೆಯ ಮೂಲಕ ಸುತ್ತಿಕೊಂಡಿದೆ ಮತ್ತು ಅದರ ಬಲಭಾಗದಲ್ಲಿ "ನಿಲುಗಡೆ ಮಾಡಿದೆ".

ಇನ್ನೊಂದು ಉದಾಹರಣೆಯೆಂದರೆ "ತುಲನಾತ್ಮಕವಾಗಿ-ಪರಿಪೂರ್ಣ" ಅಂಶಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ನೀವು ಪೊಸಿಸ್ ರಿಲೇಟಿವ್ ಹೊಂದಿರುವ ಮತ್ತೊಂದು ಸಂಪೂರ್ಣ ಒಳಗೆ ನಮೂದಿಸಬಹುದು. ಇದರ ಪರಿಣಾಮವಾಗಿ, ನಾವು ಒಂದು ಗಾತ್ರವನ್ನು ಹೊಂದಿಲ್ಲದಿರುವ "ಸಂಬಂಧಿ" ಬ್ಲಾಕ್ ಅನ್ನು ಹೊಂದಿದ್ದೇವೆ, ಅದರಲ್ಲಿ ಒಂದು ಸಂಪೂರ್ಣವಾದವು ಕೆತ್ತಲ್ಪಟ್ಟಿದೆ, ಅದು ಮುಂಚಿನ ಅಂಶಗಳನ್ನು ಅವಲಂಬಿಸಿರುವ ಸ್ಥಾನದಲ್ಲಿ ಸ್ವತಃ ಸ್ಪಷ್ಟವಾಗಿ ಗೋಚರಿಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು ಹೊಂದಿದೆ.

ಪೊಸಿಷನ್ ರಿಲೇಟಿವ್ ಅನ್ನು ಬಳಸುವಾಗ ಸಾಮಾನ್ಯ ದೋಷಗಳು

ಪೊಸಿಷನ್ ರಿಲೇಟಿವ್ ಅನ್ನು ಬಳಸುವಾಗ ಅತ್ಯಂತ ಸಾಮಾನ್ಯವಾದ ತಪ್ಪುವೆಂದರೆ, ಅನೇಕ ವಿನ್ಯಾಸ ವಿನ್ಯಾಸಕರು ಎಲ್ಲಿಯಾದರೂ ಇರುವ ಬ್ಲಾಕ್ಗಾಗಿ ಜಾಗವನ್ನು ಕಾಯ್ದಿರಿಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು ಮರೆತುಬಿಡುತ್ತಾರೆ. ಉದಾಹರಣೆಗೆ, ನಿಮ್ಮಲ್ಲಿ ಸಾಕಷ್ಟು ದೊಡ್ಡದಾದಿದ್ದರೆ, ಪರದೆಯ ಹೊರಗಡೆ ಇರಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಸಂಬಂಧಿತ ಸ್ಥಾನವನ್ನು ಹೊಂದಿದ್ದರೆ, ಅದರಲ್ಲಿ "ರಂಧ್ರ" ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಕೆಲವೊಮ್ಮೆ ಈ ಆಸ್ತಿ, ಕೆಲವೊಮ್ಮೆ ಕೆಲವು ಅನಾನುಕೂಲತೆಗಳನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ, ಒಳ್ಳೆಯದಕ್ಕಾಗಿ ಬಳಸಬಹುದು, ಉದಾಹರಣೆಗೆ, ಒಂದು "ಸ್ವ-ಸಭೆ" ಸೈಟ್ನ ಆಸಕ್ತಿದಾಯಕ ಪರಿಣಾಮವನ್ನು ಉಂಟುಮಾಡುತ್ತದೆ, ಅದರಲ್ಲಿ ಅದರ ಎಲ್ಲಾ ಬ್ಲಾಕ್ಗಳನ್ನು ನಿಧಾನವಾಗಿ ಮೇಲ್ಭಾಗದಲ್ಲಿ ಇರಿಸಲಾಗುತ್ತದೆ: 0 ಸ್ಥಾನ; ಎಡ: 0; ಅಂದರೆ, ಅದರ ಮೂಲ ಸ್ಥಳದಲ್ಲಿ.