CSS

פריסה בסיסית (Layout)

Display

התכונה הבסיסית ביותר לשליטה בפריסה:

block

.block {
    display: block;
}

• תופס את כל הרוחב הזמין
• מתחיל בשורה חדשה
• אפשר להגדיר width/height
• דוגמאות: <div>, <p>, <h1>

inline

.inline {
    display: inline;
}

• לא שובר שורה
• לא ניתן להגדיר width/height
• margin/padding אופקי עובד, אנכי - חלקית
• דוגמאות: <span>, <a>, <strong>

inline-block

.inline-block {
    display: inline-block;
}

• לא שובר שורה (כמו inline)
• כן ניתן להגדיר width/height (כמו block)
• שימושי לכפתורים, תפריטים

none

.hidden {
    display: none;
}

• מסתיר את האלמנט לחלוטין
• לא תופס מקום בדף

השוואה

Position

static (ברירת מחדל)

.element {
    position: static;
}

• האלמנט בזרימה הרגילה
• top/right/bottom/left לא עובדים

relative

.element {
    position: relative;
    top: 20px;
    left: 10px;
}

• האלמנט בזרימה הרגילה
• אפשר להזיז יחסית למיקום המקורי
• המקום המקורי נשמר (אלמנטים אחרים לא זזים)

absolute

.parent {
    position: relative; /* ההורה חייב להיות positioned */
}

.element {
    position: absolute;
    top: 0;
    right: 0;
}

• יוצא מהזרימה הרגילה
• ממוקם יחסית להורה הממוקם הקרוב
• אם אין הורה ממוקם - יחסית ל-viewport

fixed

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

• יוצא מהזרימה הרגילה
• ממוקם יחסית ל-viewport
• לא זז בגלילה
• שימושי לתפריטים, כפתורים צפים

sticky

.header {
    position: sticky;
    top: 0;
}

• שילוב של relative ו-fixed
• מתנהג כ-relative עד שמגיעים לנקודה מסוימת
• אז "נדבק" (כמו fixed)

המאפיינים: top, right, bottom, left

.element {
    position: absolute;
    top: 20px;      /* מרחק מלמעלה */
    right: 10px;    /* מרחק מימין */
    bottom: 20px;   /* מרחק מלמטה */
    left: 10px;     /* מרחק משמאל */
}

מילוי מלא

.overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* או בקיצור: */
    inset: 0;
}

z-index

שליטה בסדר השכבות (מי מעל מי):

.layer1 {
    position: relative;
    z-index: 1;
}

.layer2 {
    position: relative;
    z-index: 2; /* מעל layer1 */
}

.layer3 {
    position: relative;
    z-index: 10; /* הכי למעלה */
}

⚠️ z-index עובד רק על אלמנטים positioned (לא static)

ערכי z-index נפוצים

:root {
    --z-dropdown: 100;
    --z-modal: 200;
    --z-overlay: 300;
    --z-tooltip: 400;
}

Float

שיטה ישנה יותר לפריסה (עדיין שימושית לטקסט עם תמונות):

.image {
    float: left;   /* צף שמאלה */
    float: right;  /* צף ימינה */
    float: none;   /* ברירת מחדל */
}

Clear

מניעת הצפה לצד האלמנטים הצפים:

.clear {
    clear: left;   /* לא ליד צפים משמאל */
    clear: right;  /* לא ליד צפים מימין */
    clear: both;   /* לא ליד אף צף */
}

Clearfix

פתרון קלאסי לקןנטיינר עם ילדים צפים:

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

💡 היום עדיף להשתמש ב-Flexbox או Grid במקום float לפריסה!

Visibility

.element {
    visibility: visible;  /* ברירת מחדל */
    visibility: hidden;   /* מוסתר אבל תופס מקום */
}

הבדל מ-display: none

דוגמה מעשית: Header קבוע

<header class="header">
    <nav class="nav">
        <a href="#" class="logo">לוגו</a>
        <ul class="nav-links">
            <li><a href="#">בית</a></li>
            <li><a href="#">אודות</a></li>
            <li><a href="#">צור קשר</a></li>
        </ul>
    </nav>
</header>
<main class="main-content">
    <!-- תוכן הדף -->
</main>

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 20px;
}

.main-content {
    margin-top: 70px; /* גובה ה-header */
}

דוגמה: Modal

<div class="modal-overlay">
    <div class="modal">
        <h2>כותרת</h2>
        <p>תוכן המודל</p>
        <button class="close-btn">×</button>
    </div>
</div>

.modal-overlay {
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

.modal {
    position: relative;
    background: white;
    padding: 30px;
    border-radius: 10px;
    max-width: 500px;
    width: 90%;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
}

סיכום

הבא: Flexbox ➡️