Z-index

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

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

אנחנו לא מעודדים התאמה אישית של ערכים בודדים אלה; אם תשנה אחד, סביר להניח שתצטרך לשנות את כולם.

$zindex-dropdown:                   1000;
$zindex-sticky:                     1020;
$zindex-fixed:                      1030;
$zindex-offcanvas-backdrop:         1040;
$zindex-offcanvas:                  1045;
$zindex-modal-backdrop:             1050;
$zindex-modal:                      1055;
$zindex-popover:                    1070;
$zindex-tooltip:                    1080;

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