Get Adobe Flash player
דף הבית מודל התיבה מאפייני position נוספים

להשלמת תמונת השימוש בתיבה בעלת מאפייני מיקום (position), צריך להכיר עוד שלושה מאפיינים

מאפיין עומק השכבה - z-index

כאמור, כל אלמנט שיש לו את המאפיין position, יכול לזוז ממקומו למיקומים חדשים.

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

מאפיין "רמת השכבה" z-index קובע את סדר השכבות של האלמנטים. העליון יסתיר את התחתון.

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

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

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

<p style="font-size: 42px;text-align: center;">Israel
<span style="color: #ff0000; position: relative; left: -125px; top: -2px;">Israel</span>
</p>

Israel Israel

 אבל, אם ניתן לאדומה ערך של z-index:-1, יווצר מצב שהשחורה היא בעלת ערך גבוה יותר, והיא תעבור למעלה ותהיה העליונה.

<p style="font-size: 42px;text-align: center;">Israel
<span style="color: #ff0000; position: relative; left: -125px; top: -2px; z-index: -1;">Israel</span>
</p>

Israel Israel

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

אל השיעור הקודם אל השיעור הבא