מדריך CSS מספר 16 - איך למקם אובייקטים בדף

שלבים

1. 1

   שלב 1

   בואו נתחיל במיקום יחסי:
2. 2

   שלב 2

   
   p.pos_left { position:relative; left:-20px; } p.pos_right { position:relative; left:20px; }

   This heading was not moved.

   This paragraph was moved to the left.

   This paragraph was moved to the right.

4. 3

   שלב 3

   
   בדוגמא השתמשנו במאפיין הposition עם הערך relative. הposition מסמן באיזה צורה אנחנו רוצים למקם את האלמנט שלנו (יש מספר אופנים - עליהם נעבור במדריך זה) והערך relative אומר שנעשה את זה באופן יחסי. כמו כן הגדרנו מאפיין left עם ערך של 20px. כך אנחנו מסמנים כמה פיקסלים אנחנו רוצים להזיז את האלמנט ביחס למיקומו המקורי (המספר יכול להיות שלילי, כמו בדוגמא).
5. 4

   שלב 4

   דרך נוספת לקבוע את מיקום האלמנט בדף היא בעזרת מאפיין הfixed. מאפיין זה מגדיר את מיקום האלמנט ביחס לחלון הדפדפן, בניגוד לrelative שמגדיר את המיקום ביחס למיקומו המקורי. מכיוון שהמיקום הוא מקובע (fixed), כאשר נקטין ונגדיל את החלון נראה שהאובייקט לא זז. כאשר אנחנו נשים אובייקט אחד מעל (לא מתחת) לשני נהיה חייבים להשתמש בposition:fixed.
6. 5

   שלב 5

   
   p.fixedpos { position:fixed; top:30px; right:5px; }

   Moved text

   Regular text

7. 6

   שלב 6

   
   שימו לב שבדוגמא הזו גם הגדרנו את הdoctype, בדפדפני אקספלורר הfixed יעבוד רק כאשר הdoctype מוגדר.
8. 7

   שלב 7

   ניתן להשתמש גם במאפיין position עם הערך obsolute, כאשר נעשה זאת, האלמנט ימוקם ביחד לאלמנט הראשון שהוא נמצא תחתיו בקינון (כולל אלמנט ה). למשל:
9. 8

   שלב 8

   
   p { position:absolute; left:110px; top:130px; }

   Paragraph with absolute position.

10. 9

    שלב 9

    
    כמו שאתם רואים, אובייקט הparagraph ממוקם 110 פיקסלים משמאל לחלון הדפדפן ו130 פיקסלים מהחלק העליון של הדפדפן.
11. 10

    שלב 10

    ניתן להגידר מצב בו נשים אוביקט אחד מעל לשני אבל כאן עולה השאלה, איזה אובייקט יהיה מלמעלה ואיזה מלמטה. בכדי לטפל בבעיה הזו, נשתמש באלמנט שנקרא z-index. בעזרת הz-index נקבע מספר (חיובי או שלילי) לאלמנט ואם המספר גבוה יותר ממספר של אלמנט אחר, האלמנט הזה יהיה מעליו (ברירת המחדל היא 0)
12. 11

    שלב 11

    
    img { position:absolute; left:0px; top:0px; z-index:-1; } img.top { position:absolute; left:140px; top:70px; z-index:0; }
13. 12

    שלב 12

    
    כלבלבים! אז אנחנו רואים שמיקמנו תמונה אחת מעל לשניה (לתמונה הראשונה יש z-index עם ערך 1- ואילו לתמונה השניה z-index עם ערך 0 (זאת ברירת המחדל אז לא חייבים לרשום את זה). שימו לב שגם שיחקנו עם מיקום התמונות.