מיקום בעזרת CSS2

מיקום - פירוט

- מיקום - פירוט - המלצת CSS2 מספקת מודל עבור כיצד ניתן למקם אלמנטים. בהכרח קיימות 4 דרכים שונות, שבהן ניתן למקם אלמנט על דף, בתוספת מספר גורמים מסבכים.

מיקום סטאטי

מיקום סטאטי הוא פשוט. מדובר על כיצד הדפים כבר מסודרים ע"י דפדפן הרשת. דפדפן רשת לוקח תיקיית HTML, ומגדיר אותה אל תוך האלמנטים שלה, מיישם עבורה סגנון מתוך דף הסגנון (או בהיעדרו, מתוך דף סגנון של ברירת מחדל) ואז "מזרים" את האלמנטים אל הדף. למיקום של אלמנט מסוים, לדוגמא פיסקה, יש בזרימה זו את המיקום הסטאטי שלה. עלינו לזכור את המיקום הסטאטי כאשר נגיע, מיד, למיקום היחסי.

מיקום מוחלט

מיקום מוחלט הוא זה שכולנו מתרגשים ממנו. בקיצור, הוא מאפשר למפתח לומר היכן יש למקם את הפינה העליונה השמאלית של אלמנט כלשהו. אנו נבחן כיצד עושים זאת מעט יותר מאוחר, אבל כעת, חשבו על הגורם המסבך הבא. הבה נניח :

P#title {position: absolute; top: 200px; left: -100px;}

האם זה מביא בחשבון את הצד השמאלי העליון של דף האתר, או את האלמנט המכיל את הפסקה של כותרת ID? ב-CSS2, זה האחרון (פיסקת הכותרת ID). כלומר, עם CSS2, כאשר אתם מגדירים מיקום, זה בהתחשב במיקום של אלמנט ההורה. אל תבלבלו זאת עם מיקום יחסי, שאותו נבחן מיד.

מיקום קבוע

מיקום קבוע הוא תת קבוצה של מיקום מוחלט. כאשר אלמנט ממוקם באופן מוחלט, הוא ממוקם בהתחשב באלמנט המכיל אותו. כאשר הדף הוא מגולגל, גם האלמנט מתגלגל. הלא יהיה זה נחמד אם היינו יכולים למקם אלמנטים בהתחשב בחלק העליון של החלון, כך שלא משנה כיצד הדף מתגלגל, האלמנטים יישארו קבועים? ניחשתם. מיקום קבוע מספק בדיוק מאפיין זה. בעזרת מיקום קבוע ואלמנט ה-OBJECT ב-HTML ניתן לבטל מסגרות לתמיד, ויחד עם זאת להרוויח מכל היתרונות, ללא כל חסרונות, של מבנה ה-FRAME.

מיקום יחסי

השם מיקום יחסי הוא, ככל הנראה, כינוי לא כל כך טוב. מיקום ביחס למה? הרבה אנשים מסיקים כי מיקום יחסי הוא כאשר אתם מגדירים מיקום בהתחשב באלמנט ההורה, ומיקום מוחלט הוא כאשר המיקום מוגדר בהתחשב בפינה השמאלית העליונה של הדף. אך כמו שראינו כעת, זה לא פועל כך.

או.קיי, אז מהו יחסי? בעיקרו, מיקום יחסי ממקם אלמנט בהתחשב היכן הוא ימוקם מבחינה סטאטית כאשר אתם ממקמים אלמנט בצורה יחסית, כמפתחים אתם אומרים לדפדפן: " הי, קח את הפסקה הזו ומקם אותה 10 פיקסלים למטה ו10- פיקסלים לימין - מהיכן שהיא הייתה אמורה להיות ממוקמת, באופן נורמלי "

כפי שראינו עם מיקום מוחלט, קיים גם כאן גורם מסבך נוסף. מה אם יש לנו אלמנט הורה הממוקם באופן יחסי, בעל ילד הממוקם באופן מוחלט? באנלוגיה למיקום מוחלט, אתם וודאי מנחשים שאלמנט הילד הממוקם באופן מוחלט ימוקם בהתחשב בפינה השמאלית העליונה של אלמנט ההורה.

עניין המיקום אינו קשה באופן מיוחד, אני מניח, אך הוא מעט ערמומי. אני מקווה שזה מיישב את העניין אודות הסוגים השונים של מיקום הזמינים ב-CSS2. קצת יותר מאוחר אנו נבחן כיצד ליישם זאת הלכה למעשה.

סוגי אלמנט

לפני שנמשיך בניתוח מפורט בנוגע לתכונות השונות של המיקום וכיצד ניתן להשתמש בהן, הבה נעיף מבט חטוף בסוגים השונים של אלמנטים של HTML, וכיצד אלה פועלים יחד עם מיקום.לפני שנמשיך בניתוח מפורט בנוגע לתכונות השונות של המיקום וכיצד ניתן להשתמש בהן, הבה נעיף מבט חטוף בסוגים השונים של אלמנטים של HTML, וכיצד אלה פועלים יחד עם מיקום.

CSS ו-HTML מספקים 3 סוגים של אלמנטים של HTML:

• אלמנטים של גוש (block).
• אלמנטים בתוך השורה (inline).
• אלמנטים של פריט רשימה

אלמנטים של גוש - מופרדים מאלמנטים סובבים בזרימה של דף ה-HTML . אלמנטים < P > ו- < DIV > הם דוגמאות לאלמנטים של גוש.

אלמנטים בתוך השורה - אינם מופרדים מאלמנטים סובבים בזרימה, ליתר דיוק הם באים ישירות אחרי האלמנטים הסמוכים שלהם. <B> ו- <CITE> הם דוגמאות לאלמנטים בתוך השורה.

אלמנטים של פריט רשימה - מוצגים בצורה זהה לאלמנטים של גוש, אך בנוסף, מתווסף סמן (כוכבית או אות אלפא-נומרית) משמאל לאלמנט.

עכשיו, המלצת ה-CSS2 אינה מפלה בין אלמנטים שונים או בין סוגי אלמנטים שונים כאשר מדובר במיקום. באופן תיאורטי, אפשר למקם אלמנט <CITE> באופן מוחלט, בדיוק כפי שניתן למקם אלמנט <DIV> באופן יחסי, או אלמנט <P> , באופן סטאטי. אך מעשית, דפדפנים אינם תומכים במיקום באופן נרחב במיוחד. עבור הביטחון, כדאי ליישם מיקום מוחלט רק עבור DIVs. ועיינו במדריך ההתאמה של הדפדפן שלנו עבור פרטים אודות אילו דפדפנים תומכים במיקום ועד כמה.