פרק 6: מיקומים ושכבות

בפרק זה נלמד על:

• הגדרת מיקום אלמנטים
• שימוש ב-z-index
• שיטות למיקום אלמנטים

הגדרת מיקום אלמנטים

ניתן להגדיר את מיקום האלמנטים עם המאפיינים position, top, right, bottom, ו-left. דוגמה:

          
            .relative-position {
              position: relative;
              top: 10px;
              left: 20px;
            }
            
            .absolute-position {
              position: absolute;
              top: 0;
              right: 0;
            }
            
            .fixed-position {
              position: fixed;
              bottom: 0;
              left: 0;
            }
          
        

שימוש ב-z-index

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

          
            .layer1 {
              position: absolute;
              z-index: 1;
            }
            
            .layer2 {
              position: absolute;
              z-index: 2;
            }
          
        

שיטות למיקום אלמנטים

ישנן מספר שיטות למיקום אלמנטים:

• Static: מיקום ברירת המחדל.
• Relative: מיקום יחסית למיקומו המקורי.
• Absolute: מיקום יחסית לאלמנט ההורה הקרוב ביותר עם מיקום שאינו static.
• Fixed: מיקום קבוע ביחס לחלון הדפדפן.
• Sticky: מיקום דביק שמשתנה לפי גלילת הדף.