דברים שלא ידענו על z-index

z-index הוא מאפיין שאני ממעטת יחסית להשתמש בו. הסיבה העיקרית היא מפני שרוב הזמן לא צריכים אותו – כל עוד לאלמנטים יש poistion: static (שזהו מיקום ברירת המחדל של כל אלמנט), האלמנטים מסתדרים בינם לבין עצמם ולא צריך מבוגר אחראי שיגיד להם לא להסתיר אחד את השני. למעשה, אפשר להחיל z-index רק על אלמנטים בעלי מיקום absolute, fixed, או relative. הסיבה השניה היא מפני שברגע שנותנים לאלמנט אחד z-index, לפעמים האלמנטים סביבו מקנאים בו ורוצים גם, ואז מתחילה מלחמת z-index-ים, שהיא מתישה מאד וקשה מאד לנצח בה…

מסיבות אלה אף פעם לא התעניינתי במיוחד במאפיין הזה, אבל אז הגיע מדריך של tutsplus – דברים שלא ידעתם על z-index – וראיתי שיש הרבה מידע על המאפיין הזה, שגם אם לא משתמשים בו, הוא מעניין.

המדריך מתחיל בהסבר על z-index, שהוא למעשה אפשרות למקם אלמנט במימד השלישי של המסך – מימד העומק. עושים זאת ע”י נתינת ערך מספרי מסויים ל-z-index של אלמנט, ומי שהערך המספרי שלו גבוה יותר – יסתיר את מי שערכו המספרי נמוך. לכאורה דבר פשוט, אבל אז המאמר מתחיל לשאול שאלות: מי גובר כשאלמנט בעל מיקום (position) ובעל z-index חופף לאלמנט שנמצא ב-flow הרגיל של הדף? מי גובר כשלאלמנט אחד יש מיקום והאלמנט השני הוא float? מה קורה כשאלמנטים ממוקמים מקוננים בתוך אלמנטים ממוקמים אחרים?
מתברר שיש stacking context ו-stacking level, ויש גם stacking order. u, וקיומם של דברים אלה משפיע ומסביר התנהגויות z-index שונות.

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

ב-smashing magazine יש מאמר משנת 2009, שמה שיפה הוא הדוגמאות הרבות שהוא מביא לשימוש מעניין ויפה ב-z-index. במאמר אחר – מה שמעולם לא סיפרו לך על z-index – ההתייחסות היא בעיקר לשאלה מתי נוצר stacking context חדש. שוב, זה לא מאד נחוץ ברוב האתרים, אבל זה מידע שנחמד לדעת. יש מאמר ב-MDN על stacking context. קצת יותר יבש מהקודם, אבל חשוב בגלל שהוא ב-MDN. והמאמר האחרון גם מדבר על זה, אבל גם מסביר יותר את העניין של stacking order.