כתוצאה מקריאת מאמר זה, תוכל ליצור divs חופפים עם CSS. לשם כך, ראשית, נלמד על ' עמדה ' ו' z-index ' נכסים.
בואו נתחיל!
נכס 'עמדה' של CSS
ב-HTML, אתה יכול להגדיר את מיקום האלמנטים על ידי שימוש ב-' עמדה ' תכונה. המיקום הסופי של רכיב בדף אינטרנט נקבע על ידי ימין, שמאל, עליון, תחתון, ובשילוב עם המאפיינים z-index.
תחביר
התחביר של מאפיין המיקום הוא:
עמדה : ערך
במקום ' ערך ', אתה יכול להגדיר מיקומים שונים של אלמנטים כגון מוחלט, יחסי, קבוע ודביק.
מאפיין CSS 'z-index'.
ה ' z-index 'מאפיין משמש להגדרת סדר המחסנית של אלמנטים. האלמנט בעל הערך הגדול יותר של z-index ממוקם מול האלמנטים האחרים.
תחביר
התחביר של המאפיין z-index הוא כדלקמן:
z-index : אוטומטי |מספרבתחביר הנתון לעיל, ' אוטומטי ' משמש להגדרת סדר בהתאם לרכיב האב, בעוד שברצף ידני, ' מספר ' מוגדר כערך של המאפיין z-index.
כעת, בואו נעבור לדוגמא המעשית של יצירת divs חופפים עם CSS.
דוגמה 1: חפיפה של Div שני עם הראשון
בקטע HTML, ניצור שני divs ונקצה שמות מחלקות שונים בתור ' div1 ' ו' div2 '.
HTML
< גוּף >< div מעמד = 'div1' >< / div >
< div מעמד = 'div2' >< / div >
< / גוּף >
כעת, עבור אל ה-CSS ופעל לפי ההוראות שניתנו:
- הגדר את הערך של מאפיין המיקום כ' מוּחלָט ” עבור מקום div1 בדיוק המקום שבו אתה רוצה.
- כוונן את הגובה והרוחב של ה-div1 כ' 250 פיקסלים ' ו' 300 פיקסלים '.
- הערך של מדד z מוגדר כ' 1 '.
- הגדר את צבע הרקע של div1 כ' rgb(4, 3, 75) '.
CSS
.div1 {עמדה : מוּחלָט ;
גוֹבַה : 250 פיקסלים ;
רוֹחַב : 300 פיקסלים ;
z-index : 1 ;
רקע כללי : rgb ( 4 , 3 , 75 ) ;
}
תְפוּקָה
ה-div הראשון מוקם בהצלחה. כעת, נעבור לחלק השני.
כדי לחפוף את ה-div2, בצע את ההוראות שניתנו:
- הגדר את הערך של מאפיין המיקום, הרוחב והגובה של ה-div2 זהה ל-' div1 '.
- הגדר את הערך של ה-z-index כ' שתיים ' כדי למקם אותו מול ה-div הראשון.
- הגדר צבע רקע שונה עבור div2 בתור ' rgb(0, 204, 255) '.
- הגדר את השוליים של div2 כ' 50 פיקסלים ' כערך השוליים העליון והשוליים השמאליים.
- הגדר את האטימות של div2 כ' 0.7 '.
CSS
.div2 {עמדה : מוּחלָט ;
רוֹחַב : 300 פיקסלים ;
גוֹבַה : 250 פיקסלים ;
z-index : 3 ;
רקע כללי : rgb ( 0 , 204 , 255 ) ;
שולים : 50 פיקסלים ;
אֲטִימוּת : 0.7 ;
}
תְפוּקָה
Div2 חופף בהצלחה עם div1.
אם אתה רוצה להגדיר div1 על גבי div שני, אתה רק צריך לשנות את הערך של ה-z-index. בואו נראה דוגמה לכך.
דוגמה 2: חפיפה של Div ראשון עם שני
בדוגמה זו, נשנה את הערך של ה-z-index של שני ה-divs. בתוך ה ' .div1 ' מחלקה של קובץ ה-CSS, הגדר את הערך של ' z-index 'נכס כ' שתיים ”:
z-index : שתיים ;לאחר מכן, ב' .div2 ' מחלקה, הגדר את הערך של ' z-index 'נכס כ' 1 ”:
z-index : 1 ;כתוצאה מכך, ה-div הראשון ימוקם לפני ה-div השני:
ריכזנו את השיטה הקלה ביותר ליצור שני divs חופפים עם CSS.
סיכום
ה ' עמדה ' ו' z-index 'מאפיין משמש ליצירת divs חופפים ב-CSS. כברירת מחדל, הערך של ה-z-index הוא 1, מה שמציין שה-div החדש שנוצר ימוקם מול ה-div הקיים. עם זאת, אתה יכול לציין כל ערך בהתאם לדרישות שלך כדי להתאים את רצף החפיפה. במאמר זה, הצענו את השיטות ליצירת Divs חופפים עם CSS.