מחשבים

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

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

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

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

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

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

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

למשל:

Paragraph with absolute position.

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

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

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

כלבלבים!


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

שימו לב שגם שיחקנו עם מיקום התמונות.