ಕೊನೆಯ ನವೀಕರಣ: 04/28/2016

CSS ಅಂಶ ಸ್ಥಾನಿಕ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ, ಅಂದರೆ ನಾವು ಪುಟದ ನಿರ್ದಿಷ್ಟ ಸ್ಥಳದಲ್ಲಿ ಅಂಶವನ್ನು ಇರಿಸಬಹುದು.

CSS ನಲ್ಲಿ ಸ್ಥಾನೀಕರಣವನ್ನು ನಿಯಂತ್ರಿಸುವ ಮುಖ್ಯ ಆಸ್ತಿ ಸ್ಥಾನದ ಆಸ್ತಿಯಾಗಿದೆ. ಈ ಆಸ್ತಿಯು ಈ ಕೆಳಗಿನ ಮೌಲ್ಯಗಳಲ್ಲಿ ಒಂದನ್ನು ತೆಗೆದುಕೊಳ್ಳಬಹುದು:

static : ಪ್ರಮಾಣಿತ ಅಂಶ ಸ್ಥಾನೀಕರಣ, ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯ

absolute : ಅಂಶವು ಅದರ ಸ್ಥಾನದ ಗುಣಲಕ್ಷಣವು ಸ್ಥಿರವಾಗಿಲ್ಲದಿದ್ದರೆ ಧಾರಕ ಅಂಶದ ಮಿತಿಗಳಿಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಸ್ಥಾನವನ್ನು ಹೊಂದಿರುತ್ತದೆ

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

ಸ್ಥಿರ : ಬ್ರೌಸರ್ ವಿಂಡೋಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಅಂಶವನ್ನು ಇರಿಸಲಾಗಿದೆ, ಇದು ಸ್ಕ್ರಾಲ್ ಮಾಡಿದಾಗ ಸ್ಥಾನವನ್ನು ಬದಲಾಯಿಸದ ಸ್ಥಿರ ಅಂಶಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ

ನೀವು ಏಕಕಾಲದಲ್ಲಿ ಫ್ಲೋಟ್ ಪ್ರಾಪರ್ಟಿ ಮತ್ತು ಸ್ಥಿರ (ಅಂದರೆ, ಡೀಫಾಲ್ಟ್ ಪ್ರಕಾರ) ಹೊರತುಪಡಿಸಿ ಯಾವುದೇ ಸ್ಥಾನೀಕರಣ ಪ್ರಕಾರವನ್ನು ಒಂದು ಅಂಶಕ್ಕೆ ಅನ್ವಯಿಸಬಾರದು.

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

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

ಹಲೋ ವರ್ಲ್ಡ್

ಇಲ್ಲಿ ಸಂಪೂರ್ಣ ಸ್ಥಾನದಲ್ಲಿರುವ ಡಿವ್ ವ್ಯೂಪೋರ್ಟ್ ಬಾರ್ಡರ್‌ನ ಎಡಕ್ಕೆ 100 ಪಿಕ್ಸೆಲ್‌ಗಳು ಮತ್ತು ಕೆಳಗಿನಿಂದ 50 ಪಿಕ್ಸೆಲ್‌ಗಳಾಗಿರುತ್ತದೆ.

ಈ ಡಿವ್ ಅಂಶದ ನಂತರ ಕೆಲವು ಇತರ ಅಂಶಗಳಿವೆ ಎಂಬುದು ಅಷ್ಟು ಮುಖ್ಯವಲ್ಲ. ಈ ಡಿವಿ ಬ್ಲಾಕ್ ಅನ್ನು ಯಾವುದೇ ಸಂದರ್ಭದಲ್ಲಿ ಬ್ರೌಸರ್ ವ್ಯೂಪೋರ್ಟ್‌ನ ಗಡಿಗಳಿಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಇರಿಸಲಾಗುತ್ತದೆ.

ಸಂಪೂರ್ಣ ಸ್ಥಾನವನ್ನು ಹೊಂದಿರುವ ಅಂಶವು ಮತ್ತೊಂದು ಕಂಟೇನರ್‌ನಲ್ಲಿ ನೆಲೆಗೊಂಡಿದ್ದರೆ, ಅದು ಸ್ಥಿರವಾದ ಸ್ಥಾನಕ್ಕೆ ಸಮನಾಗದ ಸ್ಥಾನದ ಆಸ್ತಿ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿದ್ದರೆ, ನಂತರ ಅಂಶವು ಕಂಟೇನರ್‌ನ ಗಡಿಗಳಿಗೆ ಹೋಲಿಸಿದರೆ ಸ್ಥಾನದಲ್ಲಿರುತ್ತದೆ:

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

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

z-ಸೂಚ್ಯಂಕ ಆಸ್ತಿ

ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಎರಡು ಅಂಶಗಳು ಒಂದೇ ಗಡಿಯನ್ನು ಹೊಂದಿರುವಾಗ, html ಮಾರ್ಕ್‌ಅಪ್‌ನಲ್ಲಿ ಕೊನೆಯದಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಅಂಶವನ್ನು ಇನ್ನೊಂದರ ಮೇಲೆ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ. ಆದಾಗ್ಯೂ, z-ಇಂಡೆಕ್ಸ್ ಪ್ರಾಪರ್ಟಿಯು ಅಂಶಗಳನ್ನು ಅತಿಕ್ರಮಿಸಿದಾಗ ಅವುಗಳ ಕ್ರಮವನ್ನು ಬದಲಾಯಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಆಸ್ತಿಯು ಅದರ ಮೌಲ್ಯವಾಗಿ ಸಂಖ್ಯೆಯನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ದೊಡ್ಡ z-ಸೂಚ್ಯಂಕ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿರುವ ಅಂಶಗಳು ಚಿಕ್ಕದಾದ z-ಸೂಚ್ಯಂಕ ಮೌಲ್ಯದೊಂದಿಗೆ ಅಂಶಗಳ ಮೇಲೆ ಗೋಚರಿಸುತ್ತವೆ.

ಉದಾಹರಣೆಗೆ:

ಈಗ ನಾವು ರೆಡ್‌ಬ್ಲಾಕ್ ಬ್ಲಾಕ್ ಶೈಲಿಗೆ ಹೊಸ ನಿಯಮವನ್ನು ಸೇರಿಸೋಣ:

RedBlock (z-ಸೂಚ್ಯಂಕ: 100; ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಮೇಲ್ಭಾಗ: 20px; ಎಡ: 50px; ಅಗಲ: 80px; ಎತ್ತರ: 80px; ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: ಕೆಂಪು; )

ಇಲ್ಲಿ z-ಸೂಚ್ಯಂಕವು 100 ಆಗಿದೆ. ಆದರೆ ಇದು ಸಂಖ್ಯೆ 100 ಆಗಿರಬೇಕಾಗಿಲ್ಲ. ಎರಡನೇ ಬ್ಲಾಕ್ ವಿವರಿಸಲಾಗದ z-ಸೂಚ್ಯಂಕವನ್ನು ಹೊಂದಿರುವುದರಿಂದ ಮತ್ತು ವಾಸ್ತವವಾಗಿ ಶೂನ್ಯವಾಗಿರುವುದರಿಂದ, redBlock ಗಾಗಿ ನಾವು z-ಸೂಚ್ಯಂಕ ಆಸ್ತಿಯನ್ನು ಯಾವುದೇ ಹೆಚ್ಚಿನ ಮೌಲ್ಯಕ್ಕೆ ಹೊಂದಿಸಬಹುದು ಶೂನ್ಯ.

ಮತ್ತು ಈಗ ಮೊದಲ ಬ್ಲಾಕ್ ಎರಡನೆಯದನ್ನು ಅತಿಕ್ರಮಿಸುತ್ತದೆ, ಮತ್ತು ಆರಂಭದಲ್ಲಿ ಇದ್ದಂತೆ ಪ್ರತಿಯಾಗಿ ಅಲ್ಲ.

ಈ ದಿನಗಳಲ್ಲಿ, ವೆಬ್ ಡೆವಲಪರ್‌ಗಳು ವಿವಿಧ CSS ತಂತ್ರಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಸಂಕೀರ್ಣ ವೆಬ್ ಪುಟ ವಿನ್ಯಾಸಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು. ಈ ಕೆಲವು ತಂತ್ರಗಳು ಸುದೀರ್ಘ ಇತಿಹಾಸವನ್ನು ಹೊಂದಿವೆ (ತೇಲುವ), ಇತರವು (ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್) ಇತ್ತೀಚಿನ ವರ್ಷಗಳಲ್ಲಿ ಜನಪ್ರಿಯತೆಯನ್ನು ಗಳಿಸಿವೆ.

ಈ ಲೇಖನದಲ್ಲಿ, ನಾವು CSS ಸ್ಥಾನೀಕರಣದ ಬಗ್ಗೆ ಸ್ವಲ್ಪ-ತಿಳಿದಿರುವ ಕೆಲವು ವಿಷಯಗಳನ್ನು ಹತ್ತಿರದಿಂದ ನೋಡೋಣ.

ನಾವು ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು, ವಿವಿಧ ರೀತಿಯ ಸ್ಥಾನೀಕರಣದ ಮೂಲಭೂತ ಅಂಶಗಳನ್ನು ಸಂಕ್ಷಿಪ್ತವಾಗಿ ಪರಿಶೀಲಿಸೋಣ.

ಲಭ್ಯವಿರುವ ಸ್ಥಾನೀಕರಣ ವಿಧಾನಗಳ ಅವಲೋಕನ

CSS ಸ್ಥಾನದ ಗುಣಲಕ್ಷಣವು ಅಂಶದ ಸ್ಥಾನದ ಪ್ರಕಾರವನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ.

ಸ್ಥಾನೀಕರಣ ಆಯ್ಕೆಗಳು

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

ಇದನ್ನು ಮಾಡಲು, ನೀವು ಸ್ಥಾನದ ಆಸ್ತಿಯನ್ನು ಈ ಕೆಳಗಿನ ಮೌಲ್ಯಗಳಲ್ಲಿ ಒಂದಕ್ಕೆ ಹೊಂದಿಸಬೇಕಾಗುತ್ತದೆ:

• ಸಂಬಂಧಿ
• ಸಂಪೂರ್ಣ
• ಸರಿಪಡಿಸಲಾಗಿದೆ
• ಜಿಗುಟಾದ

ಮತ್ತು ಸ್ಥಾನವನ್ನು ಹೊಂದಿಸಿದ ನಂತರವೇ, ಅಂಶವನ್ನು ಸರಿದೂಗಿಸುವ ಗುಣಲಕ್ಷಣಗಳನ್ನು ನೀವು ಬಳಸಬಹುದು:

• ಬಲ
• ಕೆಳಗೆ
• ಈ ಗುಣಲಕ್ಷಣಗಳ ಆರಂಭಿಕ ಮೌಲ್ಯವು ಸ್ವಯಂ ಕೀವರ್ಡ್ ಆಗಿದೆ.

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

ಮುಖ್ಯ ಸ್ಥಾನೀಕರಣ ವಿಧಾನಗಳ ನಡುವಿನ ವ್ಯತ್ಯಾಸಗಳು

ಈಗ ಲಭ್ಯವಿರುವ ಸ್ಥಾನಿಕ ಪ್ರಕಾರಗಳ ನಡುವಿನ ಮೂರು ಮೂಲಭೂತ ವ್ಯತ್ಯಾಸಗಳನ್ನು ತ್ವರಿತವಾಗಿ ನೋಡೋಣ:

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

ಡೆಮೊದಲ್ಲಿ ನೀವು ಇದನ್ನು ಹೆಚ್ಚು ವಿವರವಾಗಿ ನೋಡಬಹುದು:

ಗಮನಿಸಿ: ಸ್ಟಿಕಿ ಸ್ಥಾನೀಕರಣವು ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಸೀಮಿತ ಬೆಂಬಲದೊಂದಿಗೆ ಇನ್ನೂ ಪ್ರಾಯೋಗಿಕ ತಂತ್ರಜ್ಞಾನವಾಗಿದೆ. ಸಹಜವಾಗಿ, ನೀವು ಬಯಸಿದರೆ, ಈ ಕಾರ್ಯವನ್ನು ಬ್ರೌಸರ್‌ಗೆ ಸೇರಿಸಲು ನೀವು ಪಾಲಿಫಿಲ್ ಅನ್ನು ಬಳಸಬಹುದು, ಆದರೆ ಅದರ ಕಡಿಮೆ ಹರಡುವಿಕೆಯನ್ನು ನೀಡಿದರೆ, ಈ ಆಸ್ತಿಯನ್ನು ಲೇಖನದಲ್ಲಿ ಚರ್ಚಿಸಲಾಗುವುದಿಲ್ಲ.

ಸಂಪೂರ್ಣ ಸ್ಥಾನೀಕರಣ ಪ್ರಕಾರದೊಂದಿಗೆ ಸ್ಥಾನಿಕ ಅಂಶಗಳು

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

ಆದ್ದರಿಂದ, ಸ್ಥಾನೀಕರಣದ ಕಡಿಮೆ-ತಿಳಿದಿರುವ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ವಿವರಿಸುವಾಗ ನಾನು ಅದನ್ನು ಪ್ರಾರಂಭಿಸಲು ನಿರ್ಧರಿಸಿದೆ.

ಆದ್ದರಿಂದ, ಸಂಪೂರ್ಣವಾಗಿ ಸ್ಥಾನದಲ್ಲಿರುವ ಅಂಶವು ಅದರ ಹತ್ತಿರದ ಸ್ಥಾನದಲ್ಲಿರುವ ಪೂರ್ವಜರಿಗೆ ಹೋಲಿಸಿದರೆ ಸರಿದೂಗಿಸಲಾಗುತ್ತದೆ. ಸಹಜವಾಗಿ, ಯಾವುದೇ ಪೂರ್ವಜರು ಸ್ಥಿರವಲ್ಲದ ಸ್ಥಾನವನ್ನು ಹೊಂದಿದ್ದರೆ ಇದು ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ - ಅಂಶವು ಯಾವುದೇ ಸ್ಥಾನಿಕ ಪೂರ್ವಜರನ್ನು ಹೊಂದಿಲ್ಲದಿದ್ದರೆ, ಗೋಚರತೆಯ ಪ್ರದೇಶಕ್ಕೆ ಸಂಬಂಧಿಸಿದಂತೆ ಅದನ್ನು ಸರಿದೂಗಿಸಲಾಗುತ್ತದೆ.

ಇದನ್ನು ಈ ಕೆಳಗಿನ ಉದಾಹರಣೆಯಿಂದ ನಿರೂಪಿಸಲಾಗಿದೆ:

ಈ ಡೆಮೊದಲ್ಲಿ, ಹಸಿರು ಬ್ಲಾಕ್ ಅನ್ನು ಆರಂಭದಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ಶೂನ್ಯ ಪ್ಯಾಡಿಂಗ್ ಕೆಳಭಾಗದಲ್ಲಿ ಇರಿಸಲಾಗಿದೆ: 0 ಮತ್ತು ಎಡ: 0 , ಅದರ ಪೂರ್ವಜ (ಕೆಂಪು ಬ್ಲಾಕ್) ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಇರಿಸಲಾಗಿಲ್ಲ.

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

ಸಂಪೂರ್ಣವಾಗಿ ಸ್ಥಾನದಲ್ಲಿರುವ ಅಂಶಗಳು ಫ್ಲೋಟ್ ಆಸ್ತಿಯನ್ನು ನಿರ್ಲಕ್ಷಿಸುತ್ತವೆ

ನಾವು ತೇಲುವ ಅಂಶಕ್ಕೆ ಸಂಪೂರ್ಣ ಅಥವಾ ಸ್ಥಿರ ಸ್ಥಾನವನ್ನು ಅನ್ವಯಿಸಿದರೆ, ಫ್ಲೋಟ್ ಆಸ್ತಿಯನ್ನು ಯಾವುದಕ್ಕೂ ಹೊಂದಿಸಲಾಗುವುದಿಲ್ಲ . ಮತ್ತೊಂದೆಡೆ, ನಾವು ಸಾಪೇಕ್ಷ ಸ್ಥಾನವನ್ನು ಹೊಂದಿಸಿದರೆ, ಅಂಶವು ತೇಲುತ್ತಲೇ ಇರುತ್ತದೆ.

ಅನುಗುಣವಾದ ಡೆಮೊವನ್ನು ನೋಡೋಣ:

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

ಸಂಪೂರ್ಣವಾಗಿ ಸ್ಥಾನದಲ್ಲಿರುವ ಇನ್ಲೈನ್ ​​ಅಂಶಗಳು ಬ್ಲಾಕ್ ಅಂಶಗಳಾಗುತ್ತವೆ

ಸಂಪೂರ್ಣ ಅಥವಾ ಸ್ಥಿರ ಸ್ಥಾನದೊಂದಿಗೆ ಇನ್ಲೈನ್ ​​ಅಂಶವು ಬ್ಲಾಕ್ ಅಂಶದ ಗುಣಲಕ್ಷಣಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ಬ್ಲಾಕ್ ಅಂಶಗಳಿಗೆ ಇನ್ಲೈನ್ ​​​​ಮೂಲಕಗಳ ಪರಿವರ್ತನೆಯನ್ನು ಕೋಷ್ಟಕದಲ್ಲಿ ಹೆಚ್ಚು ವಿವರವಾಗಿ ವಿವರಿಸಲಾಗಿದೆ.

ಈ ಸಂದರ್ಭದಲ್ಲಿ, ನಾವು ಎರಡು ವಿಭಿನ್ನ ಅಂಶಗಳನ್ನು ರಚಿಸಿದ್ದೇವೆ. ಮೊದಲ (ಹಸಿರು ಬ್ಲಾಕ್) ಒಂದು ಬ್ಲಾಕ್ ಅಂಶವಾಗಿದೆ, ಮತ್ತು ಎರಡನೇ (ಕೆಂಪು ಬ್ಲಾಕ್) ಇನ್ಲೈನ್ ​​ಅಂಶವಾಗಿದೆ. ಆರಂಭದಲ್ಲಿ, ಹಸಿರು ಬ್ಲಾಕ್ ಮಾತ್ರ ಗೋಚರಿಸುತ್ತದೆ.

ಕೆಂಪು ಬಾಕ್ಸ್ ಗೋಚರಿಸುವುದಿಲ್ಲ ಏಕೆಂದರೆ ಅದರ ಅಗಲ ಮತ್ತು ಎತ್ತರ ಗುಣಲಕ್ಷಣಗಳು ಬ್ಲಾಕ್ ಮತ್ತು ಇನ್‌ಲೈನ್-ಬ್ಲಾಕ್ ಅಂಶಗಳೊಂದಿಗೆ ಮಾತ್ರ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಮತ್ತು ಇದು ಯಾವುದೇ ವಿಷಯವನ್ನು ಹೊಂದಿಲ್ಲದ ಕಾರಣ, ಇದು ಯಾವುದೇ ಆಯಾಮಗಳನ್ನು ಹೊಂದಿಲ್ಲ.

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

ಸಂಪೂರ್ಣವಾಗಿ ಸ್ಥಾನದಲ್ಲಿರುವ ಅಂಶಗಳು ಪ್ಯಾಡಿಂಗ್ ಕುಸಿತವನ್ನು ಹೊಂದಿಲ್ಲ

ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಎರಡು ಲಂಬ ಅಂಚುಗಳು ಸ್ಪರ್ಶಿಸಿದಾಗ, ಅವುಗಳನ್ನು ಗರಿಷ್ಠಕ್ಕೆ ಸಮಾನವಾಗಿ ಸಂಯೋಜಿಸಲಾಗುತ್ತದೆ. ಇದನ್ನು ಮಾರ್ಜಿನ್ ಕುಸಿತ ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ.

ಇಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ಸ್ಥಾನದಲ್ಲಿರುವ ಅಂಶಗಳ ನಡವಳಿಕೆಯು ತೇಲುವ ಅಂಶಗಳಿಗೆ ಹೋಲುತ್ತದೆ - ಅವುಗಳ ಪ್ಯಾಡಿಂಗ್ ಅದರ ನೆರೆಹೊರೆಯವರೊಂದಿಗೆ ಸಂಯೋಜಿಸಲ್ಪಟ್ಟಿಲ್ಲ.

ಈ ಡೆಮೊದಲ್ಲಿ, ಅಂಶಕ್ಕೆ 20 ಪಿಕ್ಸೆಲ್‌ಗಳ ಪ್ಯಾಡಿಂಗ್ ನೀಡಲಾಗಿದೆ. ಇದರ ಪ್ಯಾಡಿಂಗ್ ಮೂಲ ಅಂಶದ ಪ್ಯಾಡಿಂಗ್‌ನೊಂದಿಗೆ ಕುಸಿಯುತ್ತದೆ, ಇದು 20 ಪಿಕ್ಸೆಲ್‌ಗಳು. ನೀವು ನೋಡುವಂತೆ, ಸಂಪೂರ್ಣ ಸ್ಥಾನದೊಂದಿಗೆ ಮಾತ್ರ ಯಾವುದೇ ಕುಸಿತವಿಲ್ಲ.

ಆದರೆ ಅಂಚುಗಳು ಕುಸಿಯುವುದನ್ನು ನಾವು ಹೇಗೆ ತಡೆಯಬಹುದು? ನಾವು ಅವುಗಳ ನಡುವೆ ಕೆಲವು ರೀತಿಯ ವಿಭಜಕವನ್ನು ಹಾಕಬೇಕಾಗಿದೆ.

ಇದು ಪ್ಯಾಡಿಂಗ್ ಅಥವಾ ಬಾರ್ಡರ್ ಆಗಿರಬಹುದು ಮತ್ತು ಪೋಷಕ ಮತ್ತು ಮಕ್ಕಳ ಅಂಶಗಳೆರಡಕ್ಕೂ ಅನ್ವಯಿಸಬಹುದು. ಮೂಲ ಅಂಶಕ್ಕೆ ಕ್ಲಿಯರ್ಫಿಕ್ಸ್ ಅನ್ನು ಸೇರಿಸುವುದು ಮತ್ತೊಂದು ಆಯ್ಕೆಯಾಗಿದೆ.

ಪಿಕ್ಸೆಲ್‌ಗಳು ಮತ್ತು ಶೇಕಡಾವಾರುಗಳೊಂದಿಗೆ ಅಂಶಗಳನ್ನು ಸ್ಥಾನಿಕಗೊಳಿಸುವುದು

ಅಂಶಗಳನ್ನು ಇರಿಸಲು ನೀವು ಎಂದಾದರೂ ಪಿಕ್ಸೆಲ್‌ಗಳ ಬದಲಿಗೆ ಶೇಕಡಾವಾರುಗಳನ್ನು ಬಳಸಿದ್ದೀರಾ? ಉತ್ತರವು ಹೌದು ಎಂದಾದರೆ, ಒಂದು ಅಂಶದ ಆಫ್‌ಸೆಟ್ ಆಯ್ಕೆಮಾಡಿದ ಘಟಕಗಳನ್ನು (ಪಿಕ್ಸೆಲ್‌ಗಳು ಅಥವಾ ಶೇಕಡಾವಾರು) ಅವಲಂಬಿಸಿರುತ್ತದೆ ಎಂದು ನಿಮಗೆ ತಿಳಿದಿದೆ.

ಇದು ಸ್ವಲ್ಪ ಗೊಂದಲಮಯವಾಗಿದೆ, ಅಲ್ಲವೇ? ಆದ್ದರಿಂದ ಮೊದಲು ಶೇಕಡಾವಾರು ಆಫ್‌ಸೆಟ್ ಬಗ್ಗೆ ವಿವರಣೆಯು ಏನು ಹೇಳುತ್ತದೆ ಎಂಬುದನ್ನು ನೋಡೋಣ:

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

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

ಡೆಮೊ ಈ ವ್ಯತ್ಯಾಸವನ್ನು ತೋರಿಸುತ್ತದೆ:

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

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

ಗಮನಿಸಿ: ನಿಮಗೆ ತಿಳಿದಿರುವಂತೆ, ರೂಪಾಂತರದ ಆಸ್ತಿ (ವಿವಿಧ ಭಾಷಾಂತರ ಕಾರ್ಯಗಳ ಜೊತೆಗೆ) ಅಂಶದ ಸ್ಥಾನವನ್ನು ಬದಲಾಯಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಆದರೆ ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಶೇಕಡಾವಾರುಗಳನ್ನು ಬಳಸುವಾಗ, ಲೆಕ್ಕಾಚಾರವು ಅಂಶದ ಗಾತ್ರವನ್ನು ಆಧರಿಸಿರುತ್ತದೆ ಮತ್ತು ಅದರ ಮೂಲವಲ್ಲ.

ತೀರ್ಮಾನ

ಈ ಲೇಖನವು CSS ನಲ್ಲಿ ಸ್ಥಾನೀಕರಣವನ್ನು ಚೆನ್ನಾಗಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ಕೆಲವು ಸವಾಲುಗಳನ್ನು ಸ್ಪಷ್ಟಪಡಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡಿದೆ ಎಂದು ನಾನು ಭಾವಿಸುತ್ತೇನೆ.

3 ಅಡಿಪಾಯ ಬ್ಲಾಕ್ಗಳನ್ನು 300x600x2400 ಕನಿಷ್ಠ 3-5 ಮೀಟರ್ಗಳಷ್ಟು ಸರಿಸಲು (ಡ್ರ್ಯಾಗ್, ತಿರುಗಿಸಿ, ಇತ್ಯಾದಿ) ಅಗತ್ಯ. ಸಮಸ್ಯೆಯೆಂದರೆ ಅವರು ಮನೆಯ ಹಿಂದೆ ನೆಲೆಸಿದ್ದಾರೆ ಮತ್ತು ಕ್ರೇನ್ ಅಥವಾ ಇತರ ವಿಶೇಷ ಉಪಕರಣಗಳಿಗೆ ಯಾವುದೇ ಪ್ರವೇಶವಿಲ್ಲ.
ನಂತರ ನಾನು ಜಗುಲಿ ನಿರ್ಮಿಸಲು ಬ್ಲಾಕ್ಗಳನ್ನು ಬಳಸಲು ಬಯಸುತ್ತೇನೆ. ಆದರೆ ಈಗ ನಾನು ಅವರು ಮಲಗಿರುವ ಜಾಗವನ್ನು ಮುಕ್ತಗೊಳಿಸಬೇಕಾಗಿದೆ - ನಾನು ಅಲ್ಲಿ ಗೆಜೆಬೊವನ್ನು ಯೋಜಿಸುತ್ತಿದ್ದೇನೆ.
ಪ್ರತಿಯೊಂದರ ತೂಕ (ನಾನು ಸರಿಯಾಗಿ ಎಣಿಸಿದರೆ) ಸುಮಾರು 1 ಟನ್. ಇದರ ಬಗ್ಗೆ ಯಾವುದೇ ಆಲೋಚನೆಗಳಿವೆಯೇ?

ಹೌದು, ಇದು ಸುಲಭವಲ್ಲ, ಆದರೆ ಇದು ಸಾಧ್ಯ. ನನ್ನ ಮಾವ ಮತ್ತು ನಾನು ಸಾಮಾನ್ಯ ಕಾರ್ ಜ್ಯಾಕ್ ಮತ್ತು ಹಲವಾರು, ಎರಡು ಇಂಚಿನ ಪೈಪ್‌ಗಳು ಮತ್ತು ಕಾಗೆಬಾರ್ ಅನ್ನು ತೆಗೆದುಕೊಂಡೆವು. ನಮ್ಮ ಮೂರು ಬ್ಲಾಕ್‌ಗಳು ಸಹ ಅನಾನುಕೂಲ ಸ್ಥಳದಲ್ಲಿವೆ, ನಾವು ಅವುಗಳನ್ನು ಸುಮಾರು 15 ಮೀಟರ್‌ಗೆ ಸರಿಸಿದ್ದೇವೆ: ನಾವು ಇದನ್ನು ಮಾಡಿದ್ದೇವೆ: ಬ್ಲಾಕ್‌ನ ಅಂಚಿನಲ್ಲಿ (ಅವು ಅದರ ಬದಿಯಲ್ಲಿ ಇಡುತ್ತವೆ, ಅಂದರೆ ಅದರ ಅಗಲವಾದ ಅಂಚಿನಲ್ಲಿ) ನಾವು ಜ್ಯಾಕ್‌ಗೆ ಸಾಕಷ್ಟು ಆಳವಾಗಿ ರಂಧ್ರವನ್ನು ಅಗೆದಿದ್ದೇವೆ. ಮತ್ತು ಹಾದುಹೋಗಲು ಒಂದು ಕೈ, ಆದ್ದರಿಂದ ಅವನ ಲಿವರ್ ಅನ್ನು ಪಂಪ್ ಮಾಡುವುದು. ಜಾಕ್ ಅನ್ನು ಕಲೆ ಮಾಡದಂತೆ ಮತ್ತು ಲೋಡ್ ಅಡಿಯಲ್ಲಿ ನೆಲಕ್ಕೆ ಅಗೆಯದಂತೆ ಸಣ್ಣ ತುಂಡು ಫ್ಲಾಟ್ ಬೋರ್ಡ್ ಅನ್ನು ರಂಧ್ರದ ಕೆಳಭಾಗದಲ್ಲಿ ಇರಿಸಲಾಗಿದೆ. ಮುಂದೆ, ಅವರು ಬ್ಲಾಕ್ ಅನ್ನು ಒಂದು ಅಂಚಿನಿಂದ ಸಾಕಷ್ಟು ಯೋಗ್ಯವಾಗಿ ಎತ್ತಿ, ಕೆಳಗಿನಿಂದ ಜ್ಯಾಕ್ನೊಂದಿಗೆ ತಳ್ಳಿದರು. ನೆಲಕ್ಕೆ ಸಂಬಂಧಿಸಿದಂತೆ ಯಾವ ಕೋನದಲ್ಲಿ ನನಗೆ ನಿಖರವಾಗಿ ತಿಳಿದಿಲ್ಲ, ಆದರೆ ಹಲವಾರು ಅರ್ಧ ಮೀಟರ್ ಪೈಪ್ ತುಂಡುಗಳನ್ನು ಬ್ಲಾಕ್ ಅಡಿಯಲ್ಲಿ ಸಮವಾಗಿ ಇರಿಸಬಹುದು. ನಂತರ ಜ್ಯಾಕ್ ಅನ್ನು ಕೆಳಕ್ಕೆ ಇಳಿಸಲಾಯಿತು ಮತ್ತು ಬ್ಲಾಕ್ ಅನ್ನು ಕೊಳವೆಗಳ ಮೇಲೆ ಹಾಕಲಾಯಿತು ಮತ್ತು ಭೂಮಿಯ ಮೇಲ್ಮೈಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ನೆಲಸಮಗೊಳಿಸಲಾಯಿತು. ಮುಂದೆ, ಪೈಪ್‌ನ ಉದ್ದದ ವಿಭಾಗಕ್ಕೆ (~ 1.8 ಮೀ) ಕಾಗೆಬಾರ್ ಅನ್ನು ಸೇರಿಸಲಾಯಿತು, ಅದನ್ನು ಬ್ಲಾಕ್‌ನ ಅಡಿಯಲ್ಲಿ ಇರಿಸಲಾಗಿಲ್ಲ (ಗಟ್ಟಿತನಕ್ಕಾಗಿ) ಮತ್ತು ಈ ಹೈಬ್ರಿಡ್ ಅನ್ನು ಲಿವರ್ ಆಗಿ ಬಳಸಲಾಯಿತು, ಅದನ್ನು ಬ್ಲಾಕ್‌ನ ಇನ್ನೊಂದು ತುದಿಯಲ್ಲಿ ಓಡಿಸಿ ಅದನ್ನು ಎತ್ತಲಾಯಿತು. ನೆಲಕ್ಕೆ ಸಂಬಂಧಿಸಿದಂತೆ (ಲಿವರ್ ಮತ್ತು ನೆಲದ ನಡುವಿನ ಕೋನವನ್ನು ಹೆಚ್ಚಿಸುವುದು) ಬ್ಲಾಕ್ ಅನ್ನು ತಮ್ಮಿಂದ ದೂರಕ್ಕೆ ತಳ್ಳಿತು. ಈಜಿಪ್ಟಿನ ಪಿರಮಿಡ್‌ಗಳ ಚಲಿಸುವ ಬ್ಲಾಕ್‌ಗಳ ತತ್ವ. ಲಾಗ್‌ಗಳ ಬದಲಿಗೆ ಪೈಪ್‌ಗಳನ್ನು ರೋಲರ್‌ಗಳಾಗಿ ಬಳಸಲಾಗುತ್ತಿತ್ತು. ಮಣ್ಣು ದ್ರವವಾಗಿದ್ದರೆ, ನೀವು ಮೊದಲು, ಜ್ಯಾಕ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡುವ ಮೊದಲು, ಪೈಪ್ಗಳ ಅಡಿಯಲ್ಲಿ ಉದ್ದವಾದ ಫ್ಲಾಟ್ ಬೋರ್ಡ್ಗಳನ್ನು ಇರಿಸಿ ಇದರಿಂದ ಬ್ಲಾಕ್ನ ತೂಕವು ಪೈಪ್ಗಳನ್ನು ಹೂತುಹಾಕುವುದಿಲ್ಲ. ನಾವು ತಳ್ಳುತ್ತೇವೆ, ಹೊಸ ಪೈಪ್ ಅನ್ನು ಬ್ಲಾಕ್ನ "ಬಿಲ್ಲು" ಅಡಿಯಲ್ಲಿ ಇರಿಸಲು ಮರೆಯುವುದಿಲ್ಲ, ಮತ್ತು "ಸ್ಟರ್ನ್" ಅಡಿಯಲ್ಲಿ ಬಿಡುಗಡೆಯಾದ ಪೈಪ್ ಅನ್ನು ಬಿಲ್ಲು ಅಡಿಯಲ್ಲಿ ಮುಂದಿನದನ್ನು ತಯಾರಿಸಿ.
ಒಟ್ಟಾರೆಯಾಗಿ, ನಾವು ಪ್ರತಿ ಬೇಸಿಗೆಯಲ್ಲಿ 3 ವರ್ಷಗಳ ಕಾಲ ಈ ಬ್ಲಾಕ್ಗಳನ್ನು ನಾವು ಗೇಟ್ಗೆ ಸುತ್ತುವವರೆಗೆ ಸುತ್ತಿಕೊಳ್ಳುತ್ತೇವೆ. ಪ್ರತಿಯೊಬ್ಬರೂ ಅವುಗಳನ್ನು ಹೇಗೆ ಬಳಸಬೇಕೆಂದು ಯೋಚಿಸಿದರು, ಆದರೆ ಅದರೊಂದಿಗೆ ಬರಲಿಲ್ಲ. ನಾವು ಮ್ಯಾನಿಪ್ಯುಲೇಟರ್‌ಗೆ ಆದೇಶಿಸಿದ್ದೇವೆ, ಅವರು ಅವುಗಳನ್ನು ಗೇಟ್‌ನಲ್ಲಿಯೇ ಲೋಡ್ ಮಾಡಿದರು ಮತ್ತು ಶುಲ್ಕಕ್ಕಾಗಿ ಅಜ್ಞಾತ ದಿಕ್ಕಿನಲ್ಲಿ ಅವುಗಳನ್ನು ತೆಗೆದುಕೊಂಡರು
ಯಾವುದಾದರೂ ಇದ್ದರೆ ತಿರುವುಗಳಲ್ಲಿ ತೊಂದರೆಗಳು ಉಂಟಾಗುತ್ತವೆ, ಆದರೆ ನೀವು ಬ್ಲಾಕ್ ಅಡಿಯಲ್ಲಿ ಪೈಪ್ಗಳನ್ನು ಸ್ಲೆಡ್ಜ್ ಹ್ಯಾಮರ್ನೊಂದಿಗೆ ಹೊಡೆದರೆ, ಅವರಿಗೆ ನಿರ್ದೇಶನವನ್ನು ನೀಡಿದರೆ ಮತ್ತು ಬದಿಗಳಿಂದ ಲಿವರ್ನೊಂದಿಗೆ ಬ್ಲಾಕ್ನ ಸ್ಥಾನವನ್ನು ಸರಿಹೊಂದಿಸಿದರೆ ಎಲ್ಲವೂ ಸಾಧ್ಯ. ಇದು ಭಾರವಾಗಿ ತೋರುತ್ತದೆ, ಆದರೆ ನಂತರ ನೀವು ಅದನ್ನು ಬಳಸಿಕೊಳ್ಳುತ್ತೀರಿ.

ಪಿ.ಎಸ್. ಈ ಬ್ಲಾಕ್‌ಗಳಿಗಾಗಿ ನಾವು ವಿಶೇಷವಾಗಿ ಖರೀದಿಸಿದ ವಿಂಚ್ ಬಹಳಷ್ಟು ಸಹಾಯ ಮಾಡಿತು. ವಿಂಚ್‌ನ ಹುಕ್ ಅನ್ನು ಬೇಲಿ ಕಂಬಗಳಿಗೆ ಸಿಕ್ಕಿಸಬಹುದು (ನಮ್ಮದು ಉತ್ತಮವಾಗಿ ಹಿಡಿದಿಟ್ಟುಕೊಳ್ಳುತ್ತದೆ) ಮತ್ತು ಈ ಪೋಸ್ಟ್‌ಗಳಿಗೆ ಪೈಪ್‌ಗಳ ಮೂಲಕ ಬ್ಲಾಕ್‌ಗಳನ್ನು ಎಳೆಯಲು ವಿಂಚ್ ಅನ್ನು ಬಳಸಬಹುದು. ಬ್ಲಾಕ್ ಬಲವರ್ಧನೆಯಿಂದ ಮಾಡಿದ 2 ಲಗ್ಗಳನ್ನು ಹೊಂದಿರಬೇಕು, ಆದ್ದರಿಂದ ವಿಂಚ್ ಅನ್ನು ಅವರಿಗೆ ಕೊಂಡಿಯಾಗಿರಿಸಲಾಗಿದೆ. ಲಿವರ್‌ನೊಂದಿಗೆ ತಳ್ಳುವುದಕ್ಕಿಂತ ಇದು ಸುಲಭವಾಗಿದೆ, ಆದರೆ ಇದು ಹೆಚ್ಚು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಹೆಚ್ಚಿನ ಶ್ರಮವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ - ಎಲ್ಲಾ ಸಮಯದಲ್ಲೂ ನೀವು ಮುಂದಿನ ಪೋಸ್ಟ್‌ಗೆ ವಿಂಚ್ ಅನ್ನು ಮರು-ಹುಕ್ ಮಾಡುತ್ತಾ ಓಡಬೇಕು.

ಪಿ.ಪಿ.ಎಸ್. ಏನಾದರೂ ಇದ್ದರೆ - ಕ್ಷಮಿಸಿ.

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

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

ಸ್ಟೈಲ್ ಶೀಟ್‌ನಲ್ಲಿ ಈ ಬ್ಲಾಕ್‌ಗಳ ಗಾತ್ರಗಳು ಮತ್ತು ಗಡಿಗಳನ್ನು ಹೊಂದಿಸೋಣ:

#blok1, #blok2, #blok3 (ಅಡ್ಡ:1px ಘನ ಕೆಂಪು; ಅಗಲ:150px; ಎತ್ತರ:50px; )

ಈಗ ಬ್ರೌಸರ್‌ನಲ್ಲಿನ ನಮ್ಮ ಪುಟವು ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:

ಈಗ ಶೈಲಿ ಪುಟಕ್ಕೆ ನಿಯಮವನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಎರಡನೇ ಬ್ಲಾಕ್ನ ಸ್ಥಾನವನ್ನು ಬದಲಾಯಿಸೋಣ:

#blok1, #blok2, #blok3 (ಅಡ್ಡ:1px ಘನ ಕೆಂಪು; ಅಗಲ:150px; ಎತ್ತರ:50px; ) #blok2(ಸ್ಥಾನ:ಸಂಬಂಧಿ; ಎಡ:50px; ಮೇಲ್ಭಾಗ:25px; )

ಈಗ ನಮ್ಮ ಪುಟವು ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:

ನಮ್ಮ ಎರಡನೇ ಬ್ಲಾಕ್ ಸಾಮಾನ್ಯ ಹರಿವಿನಲ್ಲಿ ಇರುವುದಕ್ಕೆ ಸಂಬಂಧಿಸಿದಂತೆ ಕೆಳಗೆ ಮತ್ತು ಬಲಕ್ಕೆ ಚಲಿಸಿದೆ. ಉಳಿದ ಬ್ಲಾಕ್ಗಳು ​​ತಮ್ಮ ಸ್ಥಳಗಳಲ್ಲಿ ಉಳಿದಿವೆ. ಪ್ರಾಯೋಗಿಕವಾಗಿ, ಸಾಪೇಕ್ಷ ಸ್ಥಾನೀಕರಣವನ್ನು ಬಹಳ ವಿರಳವಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ, ಆದ್ದರಿಂದ ನಾವು ಅದರ ಬಗ್ಗೆ ಹೆಚ್ಚಿನ ಗಮನವನ್ನು ನೀಡುವುದಿಲ್ಲ ಮತ್ತು ತೇಲುವ ಬ್ಲಾಕ್ಗಳನ್ನು ಪರಿಗಣಿಸುತ್ತೇವೆ.

ತೇಲುವ ಬ್ಲಾಕ್ಗಳು

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

ಅಂತಹ ಬ್ಲಾಕ್‌ಗಳು ಪುಟದ ಸುತ್ತಲೂ ಮುಕ್ತವಾಗಿ ಚಲಿಸಬಹುದು, HTML ನಲ್ಲಿನ ಚಿತ್ರಗಳು ಇದೇ ರೀತಿಯಲ್ಲಿ ವರ್ತಿಸುತ್ತವೆ, ಪ್ಯಾರಾಮೀಟರ್ ಬಳಸಿ ಜೋಡಿಸಲಾಗುತ್ತದೆ ಜೋಡಿಸು.

ಫ್ಲೋಟಿಂಗ್ ಬ್ಲಾಕ್ಗಳನ್ನು ಆಸ್ತಿಯಿಂದ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ ತೇಲುತ್ತವೆ, ಬ್ಲಾಕ್ ತೇಲುತ್ತದೆಯೇ ಮತ್ತು ಅದು ಯಾವ ದಿಕ್ಕಿನಲ್ಲಿ ಚಲಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. ಮೂರು ಆಯ್ಕೆಗಳಿವೆ:

• ಬಿಟ್ಟರು- ಬ್ಲಾಕ್ ಅನ್ನು ಎಡ ಅಂಚಿಗೆ ಒತ್ತಲಾಗುತ್ತದೆ, ಉಳಿದ ಅಂಶಗಳು ಅದರ ಸುತ್ತಲೂ ಬಲಭಾಗದಲ್ಲಿ ಹರಿಯುತ್ತವೆ.


• ಬಲ- ಬ್ಲಾಕ್ ಅನ್ನು ಬಲ ಅಂಚಿಗೆ ಒತ್ತಲಾಗುತ್ತದೆ, ಉಳಿದ ಅಂಶಗಳು ಎಡಭಾಗದಲ್ಲಿ ಅದರ ಸುತ್ತಲೂ ಹರಿಯುತ್ತವೆ.


• ಯಾವುದೂ ಇಲ್ಲ- ಬ್ಲಾಕ್ ಚಲಿಸುವುದಿಲ್ಲ ಮತ್ತು ಆಸ್ತಿಯ ಪ್ರಕಾರ ಸ್ಥಾನದಲ್ಲಿದೆ ಸ್ಥಾನ.

ಒಂದು ಉದಾಹರಣೆಯನ್ನು ನೋಡೋಣ. ನಾವು ಈ ಕೆಳಗಿನ ಕೋಡ್‌ನೊಂದಿಗೆ HTML ಪುಟವನ್ನು ಹೊಂದಿದ್ದೇವೆ ಎಂದು ಹೇಳೋಣ:

ಬ್ಲಾಕ್ ಸ್ಥಾನೀಕರಣ

1 ಪಠ್ಯವನ್ನು ನಿರ್ಬಂಧಿಸಿ

ಮತ್ತು ಈ ಕೆಳಗಿನ ಕೋಡ್‌ನೊಂದಿಗೆ style.css ಪುಟ:

#blok1( ಗಡಿ:1px ಘನ ಕೆಂಪು; ಅಗಲ:150px; ಎತ್ತರ:50px; )

ಈಗ ಬ್ರೌಸರ್‌ನಲ್ಲಿನ ನಮ್ಮ ಪುಟವು ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:

ನಮ್ಮ ಬ್ಲಾಕ್ ಅನ್ನು ತೇಲುವಂತೆ ಮಾಡೋಣ ಮತ್ತು ಎಡ ಅಂಚಿಗೆ ತಳ್ಳೋಣ:

#blok1(ಅಡ್ಡ:1px ಘನ ಕೆಂಪು; ಅಗಲ:150px; ಎತ್ತರ:50px; ಫ್ಲೋಟ್:ಎಡ; )

ಈಗ ನಾವು ಬ್ಲಾಕ್ ಅನ್ನು ಬಲ ಅಂಚಿಗೆ ತಳ್ಳೋಣ:

#blok1(ಅಡ್ಡ:1px ಘನ ಕೆಂಪು; ಅಗಲ:150px; ಎತ್ತರ:50px; ಫ್ಲೋಟ್:ಬಲ; )

ಈಗ ಬ್ರೌಸರ್‌ನಲ್ಲಿನ ನಮ್ಮ ಪುಟವು ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:

ಪುಟದಲ್ಲಿ ಹಲವಾರು ಫ್ಲೋಟಿಂಗ್ ಬ್ಲಾಕ್‌ಗಳಿದ್ದರೆ ಏನಾಗುತ್ತದೆ? ನಮ್ಮ html ಪುಟಕ್ಕೆ ಮತ್ತೊಂದು ಬ್ಲಾಕ್ ಅನ್ನು ಸೇರಿಸೋಣ:

ಬ್ಲಾಕ್ ಸ್ಥಾನೀಕರಣ

1 ಪಠ್ಯವನ್ನು ನಿರ್ಬಂಧಿಸಿ

ಪಠ್ಯವನ್ನು ನಿರ್ಬಂಧಿಸಿ 2

ಪುಟದಲ್ಲಿ ಕೆಲವು ಅಂಶಗಳು. ಇದು ಕೇವಲ ಪಠ್ಯ, ಲಿಂಕ್‌ಗಳು, ಪಟ್ಟಿಗಳು, ಚಿತ್ರಗಳು ಇತ್ಯಾದಿ ಆಗಿರಬಹುದು.

ಮತ್ತು ಅವರಿಗೆ ವಿವಿಧ ಆಸ್ತಿ ಮೌಲ್ಯಗಳನ್ನು ನೀಡಿ ತೇಲುತ್ತವೆ:

#blok1(ಅಡ್ಡ:1px ಘನ ಕೆಂಪು; ಅಗಲ:150px; ಎತ್ತರ:50px; ಫ್ಲೋಟ್:ಎಡ; ) #blok2(ಅಡಿಗೆ:1px ಘನ ಕೆಂಪು; ಅಗಲ:150px; ಎತ್ತರ:50px; ಫ್ಲೋಟ್:ಬಲ;

ಈಗ ಬ್ರೌಸರ್‌ನಲ್ಲಿನ ನಮ್ಮ ಪುಟವು ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:

ಅವರು ಒಂದೇ ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿದ್ದರೆ ಏನು? ಉದಾಹರಣೆಗೆ:

#blok1(ಅಡ್ಡ:1px ಘನ ಕೆಂಪು; ಅಗಲ:150px; ಎತ್ತರ:50px; ಫ್ಲೋಟ್:ಎಡ; ) #blok2( ಗಡಿ:1px ಘನ ಕೆಂಪು; ಅಗಲ:150px; ಎತ್ತರ:50px; ಫ್ಲೋಟ್:ಎಡ;

ನಂತರ ಎರಡನೇ ಬ್ಲಾಕ್ ಮೊದಲ ಬ್ಲಾಕ್ನ ಬಲ ಅಂಚಿನ ವಿರುದ್ಧ ಒತ್ತುತ್ತದೆ:

ಅದೇ ಮೌಲ್ಯಗಳಿಗೆ ಪರಿಸ್ಥಿತಿಯು ಹೋಲುತ್ತದೆ ಬಲ:

#blok1( ಗಡಿ: 1px ಘನ ಕೆಂಪು; ಅಗಲ: 150px; ಎತ್ತರ: 50px; ಫ್ಲೋಟ್: ಬಲ; ) #blok2( ಗಡಿ: 1px ಘನ ಕೆಂಪು; ಅಗಲ: 150px; ಎತ್ತರ: 50px; ಫ್ಲೋಟ್: ಬಲ; )

ದಯವಿಟ್ಟು ಗಮನಿಸಿ: ಮೊದಲ ಬ್ಲಾಕ್ 1 ಅನ್ನು ಬಲ ಅಂಚಿಗೆ ಒತ್ತಲಾಗುತ್ತದೆ ಮತ್ತು ನಂತರ ಬ್ಲಾಕ್ 2 ಅನ್ನು ಅದಕ್ಕೆ ಒತ್ತಲಾಗುತ್ತದೆ.

ಆದರೆ ಬ್ಲಾಕ್‌ಗಳನ್ನು ಬಲ ಅಂಚಿಗೆ ಒತ್ತುವಂತೆ ನಾವು ಬಯಸಿದರೆ, ಆದರೆ ಒಂದರ ಕೆಳಗೆ ಒಂದು ಇದೆ. ಇದಕ್ಕಾಗಿ ಆಸ್ತಿ ಇದೆ ಸ್ಪಷ್ಟ, ಇದು ತೇಲುವ ಬ್ಲಾಕ್‌ನ ಯಾವ ಬದಿಗಳು ಇತರ ಫ್ಲೋಟಿಂಗ್ ಬ್ಲಾಕ್‌ಗಳ ಪಕ್ಕದಲ್ಲಿ ಇರಬಾರದು ಎಂಬುದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಈ ಆಸ್ತಿಯನ್ನು ನಾಲ್ಕು ಮೌಲ್ಯಗಳಲ್ಲಿ ಒಂದಕ್ಕೆ ಹೊಂದಿಸಬಹುದು:

• ಬಿಟ್ಟರು- ಬ್ಲಾಕ್ ಎಲ್ಲಾ ಎಡ-ಬದಿಯ ಬ್ಲಾಕ್‌ಗಳ ಕೆಳಗೆ ಇರಬೇಕು.


• ಬಲ- ಬ್ಲಾಕ್ ಎಲ್ಲಾ ಬಲ-ಬದಿಯ ಬ್ಲಾಕ್‌ಗಳ ಕೆಳಗೆ ಇರಬೇಕು.


• ಎರಡೂ- ಬ್ಲಾಕ್ ಎಲ್ಲಾ ತೇಲುವ ಬ್ಲಾಕ್‌ಗಳ ಕೆಳಗೆ ಇರಬೇಕು.


• ಯಾವುದೂ ಇಲ್ಲ- ಯಾವುದೇ ನಿರ್ಬಂಧಗಳಿಲ್ಲ, ಇದು ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವಾಗಿದೆ.

ನಮ್ಮ ಕೊನೆಯ ಉದಾಹರಣೆಯಲ್ಲಿ ಈ ಆಸ್ತಿಯನ್ನು ಎರಡನೇ ಬ್ಲಾಕ್‌ಗೆ ಹೊಂದಿಸೋಣ:

#blok1( ಗಡಿ: 1px ಘನ ಕೆಂಪು; ಅಗಲ: 150px; ಎತ್ತರ: 50px; ಫ್ಲೋಟ್: ಬಲ; ) #blok2( ಗಡಿ: 1px ಘನ ಕೆಂಪು; ಅಗಲ: 150px; ಎತ್ತರ: 50px; ಫ್ಲೋಟ್: ಬಲ; ಸ್ಪಷ್ಟ: ಬಲ; )

ಈಗ ಅದು ನನಗೆ ಬೇಕಾದ ರೀತಿಯಲ್ಲಿ ಹೊರಹೊಮ್ಮಿದೆ: ಒಂದು ಬ್ಲಾಕ್ ಇನ್ನೊಂದರ ಅಡಿಯಲ್ಲಿ:

ಹಿಂದಿನ ಪಾಠದಲ್ಲಿ, ಸಂಪೂರ್ಣ ಸ್ಥಾನವನ್ನು ಬಳಸಿಕೊಂಡು ನಾವು ಈ ರೀತಿಯ ಪುಟವನ್ನು ರಚಿಸಿದ್ದೇವೆ:

ಫ್ಲೋಟಿಂಗ್ ಬ್ಲಾಕ್ಗಳನ್ನು ಬಳಸಿ ಇದನ್ನು ಹೇಗೆ ಮಾಡಬಹುದೆಂದು ನೋಡೋಣ. ಆದ್ದರಿಂದ, ಪುಟದ ಕೋಡ್ ಈ ಕೆಳಗಿನಂತಿರುತ್ತದೆ:

ಬ್ಲಾಕ್ ಸ್ಥಾನೀಕರಣ

ಸೈಟ್ ಹೆಡರ್

ವಿಷಯ

ಸುದ್ದಿ ಬ್ಲಾಕ್

ಸೈಟ್ನ ಕೆಳಭಾಗದಲ್ಲಿ

style.css ಪುಟದಲ್ಲಿ, ಮೊದಲು ನಮ್ಮ ಬ್ಲಾಕ್‌ಗಳಿಗೆ ಆಯಾಮಗಳು ಮತ್ತು ಹಿನ್ನೆಲೆಯನ್ನು ಹೊಂದಿಸೋಣ:

#ಹೆಡರ್(ಹಿನ್ನೆಲೆ:ಡಾರ್ಕ್ರೆಡ್; ಅಗಲ:715px; ಎತ್ತರ:100px; ) #ಮೆನು(ಹಿನ್ನೆಲೆ:ಓಲ್ಡ್ಲೇಸ್; ಅಗಲ:190px; ಎತ್ತರ:300px; ) #ವಿಷಯ(ಹಿನ್ನೆಲೆ:ಓಲ್ಡ್ಲೇಸ್; ಅಗಲ:525px; ಎತ್ತರ:300px; ) #ಅಡಿಟಿಪ್ಪಣಿ (ಹಿನ್ನೆಲೆ:ಡಾರ್ಕ್ರೆಡ್; ಅಗಲ:715px; ಎತ್ತರ:30px; ) #ಸುದ್ದಿ(ಹಿನ್ನೆಲೆ:ಹಳದಿ; ಅಗಲ:150px; ಎತ್ತರ:280px; )

ಈಗ ನಮ್ಮ ಬ್ಲಾಕ್ಗಳು ​​ಸಾಮಾನ್ಯ ಹರಿವಿನಲ್ಲಿ ನೆಲೆಗೊಂಡಿವೆ, ಅಂದರೆ. ಒಂದರ ಕೆಳಗೆ ಒಂದು. ನಾವು ಬ್ಲಾಕ್ಗಳನ್ನು ಮಾಡಬೇಕಾಗಿದೆ ಮೆನುಮತ್ತು ವಿಷಯತೇಲುವ ಮತ್ತು ಎಡಗೈ. ಒಂದು ಬ್ಲಾಕ್ ಸುದ್ದಿಬಲ ಅಂಚಿನ ವಿರುದ್ಧ ಒತ್ತಬೇಕು, ಅಂದರೆ. ನಾವು ಅದನ್ನು ಬಲಗೈ ತೇಲುವ ಬ್ಲಾಕ್ ಆಗಿ ಮಾಡುತ್ತೇವೆ:

#ಹೆಡರ್(ಹಿನ್ನೆಲೆ:ಡಾರ್ಕ್ರೆಡ್; ಅಗಲ:715px; ಎತ್ತರ:100px; ) #ಮೆನು(ಹಿನ್ನೆಲೆ:ಓಲ್ಡ್ಲೇಸ್; ಅಗಲ:190px; ಎತ್ತರ:300px; ಫ್ಲೋಟ್:ಎಡ; ) #ವಿಷಯ(ಹಿನ್ನೆಲೆ:ಓಲ್ಡ್ಲೇಸ್; ಅಗಲ:525px; ಎತ್ತರ:300px ; ಫ್ಲೋಟ್:ಎಡ; ಅಡಿಟಿಪ್ಪಣಿ

ಬ್ರೌಸರ್‌ನಲ್ಲಿನ ನಮ್ಮ ಪುಟವು ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:

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

ಇದು ನಮಗೆ ಏಕೆ ಕೆಲಸ ಮಾಡಲಿಲ್ಲ? ಏಕೆಂದರೆ ನಮ್ಮ ಬ್ಲಾಕ್ ಸುದ್ದಿ html ಕೋಡ್‌ನಲ್ಲಿ ಪಠ್ಯದ ಕೆಳಗೆ ಇದೆ ಮತ್ತು ಅದರ ಕೆಳಗೆ ಇರುವ ಪಠ್ಯ ಮಾತ್ರ ಅದರ ಸುತ್ತಲೂ ಹರಿಯುತ್ತದೆ. ಇದನ್ನು ಸರಿಪಡಿಸಲು ನಾವು ನಮ್ಮ ಸ್ಥಳವನ್ನು ಇಡಬೇಕು ವಿಭಾಗ = "ಸುದ್ದಿ"ಪಠ್ಯದ ಮೇಲೆ (ಅಂದರೆ "ವಿಷಯ" ಪದದ ಮೊದಲು):

ಬ್ಲಾಕ್ ಸ್ಥಾನೀಕರಣ

ಸೈಟ್ ಹೆಡರ್

ಸುದ್ದಿ ಬ್ಲಾಕ್

ವಿಷಯ

ಸೈಟ್ನ ಕೆಳಭಾಗದಲ್ಲಿ

ಈಗ ನಮ್ಮ ಸುದ್ದಿ ಬ್ಲಾಕ್ ಅದರ ಸ್ಥಾನದಲ್ಲಿದೆ:

ಮತ್ತು ಆದ್ದರಿಂದ ಅದು ಮೇಲಿನ ಮತ್ತು ಬಲ ಅಂಚುಗಳ ಹತ್ತಿರ ಒತ್ತುವುದಿಲ್ಲ, ನಾವು ಈ ಬ್ಲಾಕ್ಗೆ ಮಾರ್ಜಿನ್ ಮೌಲ್ಯವನ್ನು ಸೇರಿಸುತ್ತೇವೆ:

#ಸುದ್ದಿ(ಹಿನ್ನೆಲೆ:ಹಳದಿ; ಅಗಲ:150px; ಎತ್ತರ:280px; ಫ್ಲೋಟ್:ಬಲ; ಅಂಚು:10px; )

ಈಗ ನಾವು ಸಂಪೂರ್ಣ ಸ್ಥಾನೀಕರಣದಂತೆಯೇ ಅದೇ ಫಲಿತಾಂಶವನ್ನು ಸಾಧಿಸಿದ್ದೇವೆ.

ಫ್ಲೋಟಿಂಗ್ ಬ್ಲಾಕ್‌ಗಳನ್ನು ಬಳಸುವುದು ಪುಟವನ್ನು ಹಾಕಲು ಸುಲಭವಾಗಿದೆ ಎಂದು ಒಪ್ಪಿಕೊಳ್ಳಿ: ನೀವು ಪಿಕ್ಸೆಲ್‌ಗಳನ್ನು ಎಣಿಕೆ ಮಾಡಬೇಕಾಗಿಲ್ಲ ಮತ್ತು ಕೋಡ್ ಚಿಕ್ಕದಾಗಿದೆ. ಹೆಚ್ಚುವರಿಯಾಗಿ, “ದ್ರವ” ವಿನ್ಯಾಸದೊಂದಿಗೆ, ಪರದೆಯ ಮೇಲೆ ಬ್ಲಾಕ್‌ನ ನಿಖರವಾದ ಸ್ಥಳವನ್ನು ನಾವು ಸೂಚಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ, ಮತ್ತು ಫ್ಲೋಟಿಂಗ್ ಬ್ಲಾಕ್‌ಗಳ ಸಹಾಯದಿಂದ ನಮಗೆ ಇದು ಅಗತ್ಯವಿಲ್ಲ, ಹೆಗ್ಗುರುತನ್ನು ಮಾತ್ರ ಸೂಚಿಸಲು ಸಾಕು (ಎಡಭಾಗದಲ್ಲಿ, ಆನ್ ಬಲ, ಕೆಳಗೆ ಅಥವಾ ಅದೇ ಸಾಲಿನಲ್ಲಿ).

ಸ್ಥಿರ ಬ್ಲಾಕ್ಗಳು

ನಿಮಗೆ ನೆನಪಿರುವಂತೆ, ಸ್ಥಿರ ಸ್ಥಾನದೊಂದಿಗೆ, ವೀಕ್ಷಣಾ ಪ್ರದೇಶಕ್ಕೆ ಸಂಬಂಧಿಸಿದಂತೆ ಬ್ಲಾಕ್ ಅನ್ನು ನಿವಾರಿಸಲಾಗಿದೆ. ಕೆಲವು ವಿಧಗಳಲ್ಲಿ, ಸ್ಥಿರ ಬ್ಲಾಕ್ಗಳು ​​ಚೌಕಟ್ಟುಗಳಿಗೆ ಹೋಲುತ್ತವೆ. ಸ್ಕ್ರೋಲಿಂಗ್ ಚೌಕಟ್ಟಿನ ಒಳಗೆ ಮಾತ್ರ ಲಭ್ಯವಿದೆ, ಆದರೆ ಬ್ಲಾಕ್‌ನೊಳಗೆ ಅಲ್ಲ.

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

#ಬ್ಲಾಕ್ (ಸ್ಥಾನ: ಸ್ಥಿರ; ಎಡ: 0px; ಮೇಲ್ಭಾಗ: 0px; )

ಪುಟವನ್ನು ಸ್ಕ್ರೋಲ್ ಮಾಡುವಾಗ ಗುರುತಿಸುವಿಕೆ "ಬ್ಲಾಕ್" ಹೊಂದಿರುವ ಬ್ಲಾಕ್ ಸ್ಥಳದಲ್ಲಿ ಉಳಿಯುತ್ತದೆ.

ಇವತ್ತಿಗೂ ಅಷ್ಟೆ. ಮುಂದಿನ ಪಾಠದಲ್ಲಿ ನಾವು ಬ್ಲಾಕ್‌ಗಳ ಕೆಲವು ಗುಣಲಕ್ಷಣಗಳು ಮತ್ತು ಅವುಗಳ ಪ್ರಕಾರಗಳೊಂದಿಗೆ ಪರಿಚಯ ಮಾಡಿಕೊಳ್ಳುತ್ತೇವೆ.

ಅವು ಸ್ಥಿರವಾದವುಗಳನ್ನು ಹೊರತುಪಡಿಸಿ ಎಲ್ಲಾ ಸ್ಥಾನಿಕ ಅಂಶಗಳೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ.

ಸ್ಥಾನೀಕರಣ ಉದಾಹರಣೆ.

ಅಂಶಗಳು ಒಂದಕ್ಕೊಂದು ಅತಿಕ್ರಮಿಸಬಹುದು!

ಉಳಿದವುಗಳ ಮೇಲೆ ಒಂದು ಅಂಶವನ್ನು ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತಿದೆ!

ಸ್ಥಾನದ ಆಸ್ತಿಯು 4 ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿದೆ: ಸ್ಥಿರ, ಸ್ಥಿರ, ಸಾಪೇಕ್ಷ ಮತ್ತು ಸಂಪೂರ್ಣ. ಈ ಪ್ರತಿಯೊಂದು ಅರ್ಥಗಳನ್ನು ಬಳಕೆಯ ಉದಾಹರಣೆಯೊಂದಿಗೆ ಕೆಳಗೆ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.

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

ಡಾಕ್ಯುಮೆಂಟ್ ಹರಿವು

ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ವೆಬ್ ಪುಟದಲ್ಲಿನ ಅಂಶಗಳನ್ನು ಅವು HTML ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿ ಗೋಚರಿಸುವ ಕ್ರಮದಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ, ಅಂದರೆ, ಬ್ಲಾಕ್ ಅಂಶಗಳು ಅವುಗಳಿಗೆ ಲಭ್ಯವಿರುವ ಸಂಪೂರ್ಣ ಅಗಲವನ್ನು ಆಕ್ರಮಿಸುತ್ತವೆ ಮತ್ತು ಒಂದರ ಕೆಳಗೆ ಒಂದರಂತೆ ಲಂಬವಾಗಿ ಜೋಡಿಸಲಾಗುತ್ತದೆ. ಲಭ್ಯವಿರುವ ಸಂಪೂರ್ಣ ಅಗಲವನ್ನು ಆಕ್ರಮಿಸುವವರೆಗೆ ಇನ್‌ಲೈನ್ ಅಂಶಗಳನ್ನು ಅಡ್ಡಲಾಗಿ ಜೋಡಿಸಲಾಗುತ್ತದೆ, ಸಂಪೂರ್ಣ ಅಗಲವನ್ನು ಆಕ್ರಮಿಸಿದ ನಂತರ, ಒಂದು ಸಾಲಿನ ವಿರಾಮವನ್ನು ಮಾಡಲಾಗುತ್ತದೆ ಮತ್ತು ಎಲ್ಲವೂ ಮತ್ತೆ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ. ಅಂಶಗಳ ಈ ಜೋಡಣೆಯನ್ನು ಕರೆಯಲಾಗುತ್ತದೆ ಸಾಮಾನ್ಯ ಹರಿವು(ಇದನ್ನು ಸಹ ಕರೆಯಲಾಗುತ್ತದೆ ಡಾಕ್ಯುಮೆಂಟ್ ಹರಿವುಅಥವಾ ಸಾಮಾನ್ಯ ಹರಿವು).

ಸಾಮಾನ್ಯ ಹರಿವಿನಿಂದ ಅಂಶವನ್ನು ತೆಗೆದುಹಾಕಲು ನೀವು ಫ್ಲೋಟ್ ಅಥವಾ ಸ್ಥಾನದ ಆಸ್ತಿಯನ್ನು ಬಳಸಬಹುದು. ಒಂದು ಅಂಶವು ಸಾಮಾನ್ಯ ಹರಿವಿನಿಂದ "ಹೊರಬಿದ್ದರೆ", ಆ ಅಂಶದ ಕೆಳಗಿನ ಕೋಡ್‌ನಲ್ಲಿರುವ ಅಂಶಗಳನ್ನು ವೆಬ್ ಪುಟದಲ್ಲಿ ಅದರ ಸ್ಥಳಕ್ಕೆ ವರ್ಗಾಯಿಸಲಾಗುತ್ತದೆ.

ಸ್ಥಿರ ಸ್ಥಾನೀಕರಣ

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

ಸ್ಥಿರ ಸ್ಥಾನದಲ್ಲಿರುವ ಅಂಶಕ್ಕೆ CSS ಗುಣಲಕ್ಷಣಗಳನ್ನು ಮೇಲಿನ , ಎಡ , ಬಲ ಅಥವಾ ಕೆಳಭಾಗದಲ್ಲಿ ಅನ್ವಯಿಸುವಾಗ, ಅವುಗಳನ್ನು ನಿರ್ಲಕ್ಷಿಸಲಾಗುತ್ತದೆ.

ಅಗತ್ಯವಿದ್ದರೆ, ನೀವು ಸ್ಥಿರ ಮೌಲ್ಯವನ್ನು ಬಳಸಿಕೊಂಡು ಸ್ಟೈಲ್ ಶೀಟ್‌ನಲ್ಲಿ ಸ್ಥಿರ ಸ್ಥಾನವನ್ನು ಹೊಂದಿಸಬಹುದು:

ಮೊದಲ ಪ್ಯಾರಾಗ್ರಾಫ್.

ಎರಡನೇ ಪ್ಯಾರಾಗ್ರಾಫ್.

ಪ್ರಯತ್ನಿಸಿ »

ಸ್ಥಿರ ಸ್ಥಾನೀಕರಣ

ಸ್ಥಿರ ಸ್ಥಾನವನ್ನು ಹೊಂದಿರುವ ಅಂಶಗಳು ಬ್ರೌಸರ್ ವಿಂಡೋಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಪುಟದಲ್ಲಿ ನೆಲೆಗೊಂಡಿವೆ. ಅಂತಹ ಅಂಶಗಳನ್ನು ಒಟ್ಟಾರೆ ಹರಿವಿನಿಂದ ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ, ಹರಿವಿನಲ್ಲಿರುವ ಸ್ಥಿರ ಅಂಶವನ್ನು ಅನುಸರಿಸುವ ಅಂಶಗಳು ಅದನ್ನು ನಿರ್ಲಕ್ಷಿಸಿ, ಚಲಿಸುತ್ತವೆ ಮತ್ತು ವೆಬ್ ಪುಟದಲ್ಲಿ ಅದರ ಸ್ಥಾನವನ್ನು ಪಡೆದುಕೊಳ್ಳುತ್ತವೆ.

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

ಪಠ್ಯ ಪಠ್ಯ ಪಠ್ಯ ಪಠ್ಯ ಪಠ್ಯ ಪಠ್ಯ ಪಠ್ಯ ಪಠ್ಯ ಕೆಲವು ಪಠ್ಯ ಪಠ್ಯ ಪಠ್ಯ ಪಠ್ಯ ಪಠ್ಯ ಪಠ್ಯ ಪಠ್ಯ ಪಠ್ಯ

ಪ್ರಯತ್ನಿಸಿ »

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

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

ಅಂತಹ ಅಂಶಗಳು ಅವುಗಳನ್ನು ಸುತ್ತುವರೆದಿರುವ ಅಂಶಗಳ ಸ್ಥಾನದ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ, ಉಳಿದ ಅಂಶಗಳು ಸ್ಥಳದಲ್ಲಿ ಉಳಿಯುತ್ತವೆ ಮತ್ತು ತುಲನಾತ್ಮಕವಾಗಿ ಸ್ಥಾನದಲ್ಲಿರುವ ಅಂಶದಿಂದ ಅತಿಕ್ರಮಿಸಬಹುದು:

ಮೊದಲ ಹಂತದ ಶೀರ್ಷಿಕೆ.

ತುಲನಾತ್ಮಕವಾಗಿ ಸ್ಥಾನ ಪಡೆದ ಶೀರ್ಷಿಕೆ.

ಮೂರನೇ ಹಂತದ ಶಿರೋನಾಮೆ.

ಪ್ರಯತ್ನಿಸಿ »

ಗಮನಿಸಿ: ಸಾಪೇಕ್ಷ ಸ್ಥಾನಿಕ (ಸಂಬಂಧಿ) ಹೊಂದಿರುವ ಅಂಶಗಳನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಸಂಪೂರ್ಣ ಸ್ಥಾನೀಕರಣ (ಸಂಪೂರ್ಣ) ಹೊಂದಿರುವ ಅಂಶಗಳಿಗೆ ಮೂಲವಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ.

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

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

ಎಲ್ಲಾ ಸಂಪೂರ್ಣವಾಗಿ ಸ್ಥಾನದಲ್ಲಿರುವ ಅಂಶಗಳು ಬ್ರೌಸರ್ ವಿಂಡೋಗೆ ಸಂಬಂಧಿಸಿ ಅಥವಾ ಸಂಪೂರ್ಣ , ಸ್ಥಿರ , ಅಥವಾ ಸಂಬಂಧಿತ ಸ್ಥಾನದ ಆಸ್ತಿಯನ್ನು ಹೊಂದಿರುವ ಹತ್ತಿರದ ಸ್ಥಾನಿಕ ಪೂರ್ವಜರಿಗೆ (ಒಂದು ಇದ್ದರೆ) ಸಂಬಂಧಿಸಿ ಇರಿಸಲಾಗುತ್ತದೆ.

ಸಂಪೂರ್ಣ ಸ್ಥಾನೀಕರಣವನ್ನು ಬಳಸಿಕೊಂಡು ಲೋಗೋದ ಸ್ಥಳವನ್ನು ಬದಲಾಯಿಸೋಣ.
ಲೋಗೋ ಈಗ ಪುಟದ ಮೇಲಿನ ಬಲ ಮೂಲೆಯಲ್ಲಿದೆ.

ಪ್ರಯತ್ನಿಸಿ »

ಅತಿಕ್ರಮಿಸುವ ಅಂಶಗಳು

ಅಂಶಗಳು ಪುಟದ ಒಟ್ಟಾರೆ ಹರಿವಿನ ಹೊರಗಿರುವಾಗ, ಅವುಗಳು ಒಂದಕ್ಕೊಂದು ಅತಿಕ್ರಮಿಸಬಹುದು. ವಿಶಿಷ್ಟವಾಗಿ, ಅಂಶಗಳ ಕ್ರಮವು ಪುಟದ HTML ಕೋಡ್‌ನಲ್ಲಿ ಅವುಗಳ ಕ್ರಮಕ್ಕೆ ಅನುರೂಪವಾಗಿದೆ, ಆದಾಗ್ಯೂ, CSS ಆಸ್ತಿ z- ಸೂಚ್ಯಂಕವನ್ನು ಬಳಸಿಕೊಂಡು ಅತಿಕ್ರಮಣದ ಕ್ರಮವನ್ನು ನಿಯಂತ್ರಿಸಲು ಸಾಧ್ಯವಿದೆ , ಅದರ ಮೌಲ್ಯವು ಹೆಚ್ಚಿನದು, ಅಂಶವು ಹೆಚ್ಚಿನದಾಗಿರುತ್ತದೆ.