z-index

מגדיר את סדר השכבות של האלמנט ביחס לאלמנטים אחרים.

מה זה z-index?

המאפיין z-index ב-CSS מגדיר את סדר השכבות של האלמנט ביחס לאלמנטים אחרים עם position שונה מ-static. אלמנט עם ערך גבוה יותר של z-index יכסה אלמנטים עם ערכים נמוכים יותר.

שימוש במאפיין z-index

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

דוגמה לשימוש ב-z-index

להלן דוגמה לשימוש במאפיין z-index:

שכבה 1

שכבה 2

שימושים מתקדמים

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

אפשר להגדיר את זה לדוגמה כך

    
          <div style="position: relative; width: 200px; height: 200px; background-color: lightblue;">
            <div style="position: absolute; top: 10px; left: 10px; width: 100px; height: 100px; background-color: lightcoral; z-index: 1;">
              שכבה 1
            </div>
            <div style="position: absolute; top: 30px; left: 30px; width: 100px; height: 100px; background-color: lightgreen; z-index: 2;">
              שכבה 2
            </div>
          </div>