כיצד ליצור אלמנט דביק ב-HTML

בלוג זה ידון במאפיין מיקום ה-CSS ובשיטה ליצירת אלמנט דביק ב-HTML.

מהו נכס מיקום CSS?

מאפיין המיקום של CSS מציין את שיטת המיקום של רכיבי HTML, שיכולים להיות אבסולוטי, דביק, סטטיסטי, קבוע, בירושה, יחסי או ראשוני.

תחביר

התחביר שניתן לעיל מראה שלמאפיין המיקום יש ערכים שונים. ניתן להקצות אותם בהתאם.

כעת, בואו נבדוק את ההליך ליצירת אלמנטים דביקים ב-HTML.

מהי עמדת CSS: דביק?

רכיב ה-HTML עם ' דָבִיק ” למיקום יש מיקום יחסי עד שהוא מגיע לנקודה ואז מתנהג כמו אלמנט דביק.

בואו נעבור על הדוגמה הפשוטה כדי להבין את הרעיון של עמדה דביקה של CSS.

דוגמה: כיצד ליצור אלמנט דביק ב-HTML?
בקובץ HTML, הוסף

עבור הכותרת,

עבור הפסקה ו-

עם שם המחלקה ' דָבִיק '. לאחר מכן, הוסף תג

עם רשימה מסודרת מקוננת

עם רשימה
1. .

   הערה : לקחנו רשימה ארוכה כדי שעם הגלילה בדף שלנו, תוכל לראות את ההתנהגות של האלמנט הדביק.

   HTML

   < h2 > הערות דביקות: ראה את ההשפעה של האלמנט הדביק < / h2 >
   < ע > מיקום: דביק < / ע >
   < div מעמד = 'דָבִיק' > זו רשימת המטלות שלי! < / div >
   < ע >
   < ol >
   < זֶה > מנהל שיחה < / זֶה >
   < זֶה > פגישה עם עובדים < / זֶה >
   < זֶה > שלח דוח < / זֶה >
   < זֶה > לך לרופא < / זֶה >
   < זֶה > תזמין טיסה < / זֶה >
   < זֶה > לך לטייל. < / זֶה >
   < זֶה > לך על מכולת. < / זֶה >
   < זֶה > צופה בטלויזיה < / זֶה >
   < זֶה > קצת טקסט. < / זֶה >
   < זֶה > קצת טקסט. < / זֶה >
   < זֶה > קצת טקסט. < / זֶה >
   < זֶה > קצת טקסט. < / זֶה >
   < זֶה > קצת טקסט. < / זֶה >
   < זֶה > קצת טקסט. < / זֶה >
   < זֶה > קצת טקסט. < / זֶה >
   < זֶה > קצת טקסט. < / זֶה >
   < זֶה > קצת טקסט. < / זֶה >
   < זֶה > קצת טקסט. < / זֶה >
   < זֶה > קצת טקסט. < / זֶה >
   < זֶה > קצת טקסט. < / זֶה >
   < זֶה > קצת טקסט. < / זֶה >
   < זֶה > קצת טקסט. < / זֶה >
   < זֶה > קצת טקסט. < / זֶה >
   < זֶה > קצת טקסט. < / זֶה >
   < זֶה > קצת טקסט. < / זֶה >
   < זֶה > קצת טקסט. < / זֶה >
   < זֶה > קצת טקסט. < / זֶה >
   < זֶה > קצת טקסט. < / זֶה >
   < זֶה > קצת טקסט. < / זֶה >
   < זֶה > קצת טקסט. < / זֶה >
   < / ol >
   < / ע >

   לאחר מכן, נספק סגנון ל-div בשם sticky:

   • כאן, ' .דָבִיק ” מייצג את המחלקה שבה יש להחיל את מאפייני הסגנון.
   • בתוך הסוגריים המתולתלים, נקצה את ' עמדה 'ערך נכס כ' דָבִיק '.
   • ה ' חלק עליון ' מוגדר כ' 0 '.
   • ה ' צבע רקע 'הוא' #00154f '.
   • תן קצת ' ריפוד ' ל-div על ידי הגדרת הערך שלו כ' 40 פיקסלים '.
   • ' גודל גופן ' כפי ש ' 30 פיקסלים '.
   • ' צֶבַע ' של הגופנים מוגדר כ' לבן '.

   CSS

   .דָבִיק {
   עמדה : דָבִיק ;
   חלק עליון : 0 ;
   צבע רקע : #00154f ;
   ריפוד : 40 פיקסלים ;
   גודל גופן : 30 פיקסלים ;
   צֶבַע : לבן ;
   }

   שמור את קובץ ה-HTML ופתח אותו בדפדפן כדי לראות את הפלט:

   

   טיפ בונוס

   על ידי שימוש ב' hsla() שיטת ', אתה יכול להגדיר רקע שקוף עבור האלמנט הדביק שנוסף באופן הבא:

   רקע כללי - צֶבַע : hsla ( 0 , 100 %, 90 %, 0.8 ) ;

   תְפוּקָה

   

   כך האלמנט נצמד למיקום הספציפי על ידי הגדרת ה-CSS ' עמדה 'ערך נכס כ' דָבִיק '.

   סיכום

   ה ' דָבִיק ” מיקום ב-CSS, גורם למיקום האלמנט לעבור בין יחסי וקבוע. כתוצאה מכך, האלמנט הדביק שנוסף ממוקם ביחס למגילה עד שהוא מגיע לנקודה מסוימת שבה הוא מתנהג כמו דביק. אתה יכול גם להתאים את רמת השקיפות של הרכיב הדביק שנוסף על ידי שימוש בשיטת hsla() . הבלוג הזה הדריך אותך להכנת אלמנטים שקופים פשוטים ודביקים.