CSS Position – המדריך המלא

ההגדרה Position היא מההגדרות היותר מורכבות שקיימות בשפת CSS. כדי לעבוד איתה נכון – צריך להבין במדויק את התכונות של כל אחת מהאפשרויות שPosition מציעה.

הקורס יקנה לך בעז”ה שליטה מלאה בתכונות השונות של position. תביני לא רק מתי להשתמש בכל אחת מההגדרות, אלא גם איך להמנע מהשלכות בעייתיות שעשויות להגרם בעבודה לא נכונה עם position.

הגדרות CSS נלוות

חוץ מלדבר על position, בקורס נכיר גם את ההגדרות top, right, left, bottom – הגדרות המיקום האבסולוטי. הגדרות אלו עובדות בצורה שונה לחלוטין בכל אחד מסוגי הposition, ולכן נלמד המשמעות שלהן בכל סיטואציה.

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

למי מיועד הקורס?

הקורס מיועד למי שעובדות בfront-end, למורות שמלמדות את השפות HTML + CSS, לתלמידות מסלול הנדסת תוכנה ועוד.

שימי ❤️. הקורס הוא לצפייה פרטית. אם את רוצה להקרין את הקורס לכיתה – צרי איתי קשר לקבלת הצעת מחיר.

מה אורך הקורס?

הקורס כולו אורך כשעה סך הכל, והוא מחולק לפרקים:

• מבוא – היכרות מלמעלה עם css position
• static – הגדרת ברירת המחדל. כמה דגשים על התכונות שלה שיהיו משמעותיים בהמשך.
• fixed – אלמנט נעוץ. נבין את התכונות המלאות של ההגדרה, למה לשים לב כאשר יוצרים header נעוץ ועוד.
• sticky – אלמנט דביק. פעם נעוץ ופעם לא. על ההבדלים בינה לבין fixed, על סיטואציות שבהן היא לא עובדת ועוד.
• absolute – המלחיץ מכולם… נבין מתי להשתמש ומתי לא להשתמש באלמנט אבסולוטי. את אילו אלמנטים במסך הוא מכיר ואת אילו לא, איך לבנות רכיבים מורכבים באמצעות absolute, ואיך לדייק את הנראות/מיקום/גודל לפי הצורך המדוייק בכל סיטואציה.
• relative – יד ימינו של absolute. נבין למה ומתי נכון להשתמש בrelative, ומה ההבדלים בינו לבין static.
• סיכום – נעבור מלמעלה בצורה מרוכזת על ההגדרות השונות ונזכיר את התכונות שאסור לשכוח.