CSS Layout & Positioning PDF

CSS layout and Positioning ‫יעל סלע זעירא‬  ‫‪Normal Flow‬‬ ‫ אפשר להסתכל על הדף כשורות ועמודות‪.‬‬ ‫ התגיות יוצגו לפי הסדר בו הן...

CSS layout and Positioning ‫יעל סלע זעירא‬  ‫‪Normal Flow‬‬ ‫ אפשר להסתכל על הדף כשורות ועמודות‪.‬‬ ‫ התגיות יוצגו לפי הסדר בו הן כתובות אחת אחרי השניה‪.‬‬ ‫ אלמנטים שהם ‪ block‬יתפסו את כל השורה ‪ -‬כאשר שמים ‪ div‬בדף הוא תופס שורה שלמה (כנ"ל ‪ h,p‬ותגיות נוספות)‪.‬‬ ‫ אלמנטים שהם ‪ inline‬יתפסו עמודה ‪ -‬כאשר שמים ‪ span‬בדף הוא תופס עמודה בשורה‪ ,‬ואם נוסיף עוד הרבה‬ ‫‪span‬ים לבסוף הם יתפסו את כל השורה ואז תתבצע ירידת שורה‪.‬‬ ‫ אלמנטים שהם ‪ float‬יצופו שמאלה או ימינה מחוץ ל ‪ normal flow‬וישפיעו על האלמטים שאחריהם‪.‬‬ ‫יעל סלע זעירא‬  ‫‪Display property‬‬ ‫ כל אלמנט בדף הוא קופסא‪ ,‬ה ‪ display‬קובע איך הקופסא מתנהגת‪.‬‬ ‫ (לכל אלמנט יש ‪ display‬בעל ערך ‪ ,default‬אם ברצוננו לשנותו יש‬ ‫לדרוס אותו ב ‪)CSS‬‬ ‫יעל סלע זעירא‬ ‫תרגיל הצגה‬ ‫פתחו את הדף ‪ display.html‬שנמצא ב ‪moodle‬‬ ‫ועמדו על ההבדלים‬ ‫יעל סלע זעירא‬  ‫‪block, Inline, inline-block‬‬ ‫ ‪ block‬מתנהג הפוך מ ‪inline‬‬ ‫ ‪ inline-block‬ו ‪ inline‬מתנהגים אותו דבר אבל ב ‪ inline-block‬הגובה‬ ‫והרוחב דינמים‬ ‫ ל ‪ inline‬לא ניתן לתת גובה הוא מקבל את המימדים שלו מהאבא‪.‬‬ ‫יעל סלע זעירא‬  visibility vs display h2.a { visibility: visible; } h2.b { visibility: hidden; } ‫יעל סלע זעירא‬  h2.a { visibility: visible; } h2.b { visibility: hidden; } The visibility Property This heading is visible This heading is hidden Notice that the hidden heading still takes up space on the page. ‫יעל סלע זעירא‬  h1.hidden { display: none; } This is a visible heading This is a hidden heading Notice that the h1 element with display: none; does not take up any space. ‫יעל סלע זעירא‬  ‫‪Positioning‬‬ ‫ לפעמים נרצה שאלמנטים "יסתדרו" לא כמו ב ‪normal flow‬‬ ‫מה קורה אם אנחנו רוצים לשים‬ ‫אך מה קורה אם אנחנו רוצים לשים אלמנט על‬ ‫אלמנט בתחתית הדף למרות שעוד‬ ‫אלמנט? למשל שתיאור התמונה יופיע על גבי‬ ‫לא הגענו עד אליו?‬ ‫התמונה?‬ ‫יעל סלע זעירא‬  Position :‫מיקום האלמנט בדף‬ Static.1 Relative.2 Absolute.3 Fixed.4 Sticky.5.‫ נקבל את המיקום הסופי‬top, right, bottom, and left ‫בנוסף עם הגדרת‬ ‫יעל סלע זעירא‬ ‫‪static‬‬ ‫יעל סלע זעירא‬  ‫‪position: static‬‬ ‫ כל אלמנט ‪ html‬ב ‪ Normal flow‬מוגדר בדף כסטטי ‪position: static‬‬ ‫ הכוונה שהוא תופס את המקום הבא בדף‬ ‫יעל סלע זעירא‬  position:relative.positioned {.positioned { position: static; position: relative; background: yellow; background: yellow; } } Hi, nice to meet you Hi, nice to meet you ‫ללא שינוי‬ ‫יעל סלע זעירא‬  ‫‪position:relative‬‬ ‫ ‪ relative‬מוציא את האלמנט מהמצב ה ‪ static‬שלו‪.‬‬ ‫ ‪ relative‬בפני עצמו לא יעשה שינוי‪ ,‬יש להוסיף‪Top, bottom, left, right :‬‬ ‫ ההזזה תתבצע יחסית למיקומו המקורי של האלמנט ב ‪ normal flow‬באמצעות תכונות ‪top, left,‬‬ ‫‪.bottom, right‬‬ ‫משאיר את המקום של האלמנט "תפוס"‪.‬‬ ‫ ‬ ‫לא משנה את התכונות הבסיסיות של האלמנט (רוחב‪ ,‬גובה)‪.‬‬ ‫ ‬ ‫‪positionRelative2.html, positionRelative1.html‬‬ ‫יעל סלע זעירא‬ ‫‪position:relative‬‬ ‫זה גם יאפשר לנו להציג אלמנט על אלמנט‪.‬‬ ‫יעל סלע זעירא‬ position : absolute absolute ‫ ל‬positionRelative2.html ‫שנו את‬ ?‫מהו השינוי‬ ‫יעל סלע זעירא‬  ‫‪Position:absolute‬‬ ‫‪ – absolute‬לא משאיר את המקום של האלמנט "תפוס"‪.‬האלמנט הופך להיות "צף" על המסך‪.‬‬ ‫משנה את התכונות הבסיסיות של האלמנט‪ ,‬הרוחב והגובה יהיו דינאמיים במידה ולא יוגדרו‪.‬‬ ‫יעל סלע זעירא‬ ‫‪Position:absolute‬‬ ‫היכן לדעתכם תופיע תגית ה‪?span-‬‬ ‫במקרה של ‪ - absolute‬האלמנט מבצע חישוב של‬ ‫ההזזה לפי "ההורה" הראשון שאינו ‪.static‬‬ ‫במקרה זה אין‪ ,‬ולכן הוא מתמקם לפי תג ‪!body‬‬ ‫*תזכורת – ה ‪ default‬של כל אלמנט הוא ‪static‬‬ ‫יעל סלע זעירא‬  ‫‪ Z-index‬הערות‬ ‫עובד רק על אלמנטים שהם ‪:position‬‬ ‫ ‪absolute‬‬ ‫ ‪relative‬‬ ‫‪fixed‬‬ ‫ ‬ ‫‪sticky‬‬ ‫ ‬ ‫‪flex‬‬ ‫ ‬ ‫*אם שני אלמנטים חופפים ללא ‪ z-index‬האחרון בקוד יעלה על הקודם לו‪.‬‬ ‫יעל סלע זעירא‬  ‫‪Z-index‬‬ ‫ ראינו שעל ידי ‪ absolute‬ניתן "להציף" אלמנט על המסך‪ ,‬אך מה קורה אם‬ ‫אני רוצים שהוא יצוף מתחת לאלמנט?‬ ‫‪zIndex.html‬‬ ‫יעל סלע זעירא‬  ‫‪Z-index‬‬ ‫על מנת לשלוט במי שיופיע‪ ,‬נעשה שימוש בתכונת ‪ z-index‬שנמצאת בתוך תכונת ‪.style‬‬ ‫התכונה מקבלת ערך שלילי או חיובי‬ ‫ שלילי יהיה כשרוצים להוריד את ה ‪priority‬‬ ‫ ככלל אלמנט בעל ערך ‪ z‬גדול מערך של אלמנט אחר יופיע מעל‪.‬‬ ‫ לפי חוק זה ערכי ‪ z-index‬של ‪ 2‬ו ‪ 3‬עבור שני אלמנטים יתנהגו בדיוק כמו ‪ 3000‬ו ‪4000‬‬ ‫בהתאמה‪.‬‬ ‫יעל סלע זעירא‬  Z-index.green-box {.gold-box {.dashed-box { position: absolute; position: absolute; position: relative; z-index: 2; above.green-box and.dashed-box background: lightgreen; */ border: dashed; width: 20%; background: gold; height: 8em; left: 65%; width: 80%; margin-bottom: 1em; top: -25px; left: 60px; margin-top: 2em; height: 7em; top: 3em; } opacity: 0.9; } } ZindexExample.html ‫יעל סלע זעירא‬  ‫‪Position:fixed‬‬ ‫‪ fixed‬הוא כמו ‪ ,absolute‬רק במקרה זה המיקום יהיה קבוע גם אם נגלול את‬ ‫המסך‪.‬‬ ‫נזיז את האלמנט יחסית לחלון הדפדפן‬ ‫באמצעות תכונות ‪top, left, bottom, right‬‬ ‫יעל סלע זעירא‬ Position:fixed FixedHeaderFooter.html ‫יעל סלע זעירא‬  ‫‪position:sticky‬‬ ‫ ממוקם על פי מיקום ה ‪ scroll‬של הדף‬ ‫ נע בין ‪ relative‬ל ‪ ,fixed‬תלוי במיקום ה ‪scroll‬‬ ‫ הוא יהיה כמו ‪ relative‬עד נקודה מסוימת ואז הוא "נתקע" במקומו כמו ‪fixed‬‬ ‫ ‪Sticky.html‬‬ ‫ ‪Stickyniceexample.html‬‬ ‫יעל סלע זעירא‬ ‫תרגיל כיתה‬ ‫צור דף חדש המכיל‪:‬‬ ‫‪ (1‬תפריט עליון ‪ header‬קבוע השתמשו ב‬ ‫‪sticky‬‬ ‫‪ (2‬מתחתיו תמונה עם טקסט ממורכז על‬ ‫גבי התמונה‬ ‫‪ (3‬מתחתיה שתי קוביות בגודל ‪200px‬‬ ‫כאשר התחתונה ‪ 100px‬פנימה ולמטה‬ ‫ומופיעה מעל העליונה‬ ‫‪ (4‬תפריט תחתון ‪ Footer‬קבוע שמופיע כל‬ ‫הזמן השתמשו ב ‪sticky/fixed‬‬ ‫יעל סלע זעירא‬ ‫יעל סלע זעירא‬ ‫יעל סלע זעירא‬