كنتيجة لقراءة هذا المقال ، ستتمكن من إنشاء ملفات div متداخلة باستخدام CSS. لهذا الغرض ، أولاً ، سنتعرف على ' موقع ' و ' الفهرس z ' الخصائص.
هيا بنا نبدأ!
خاصية CSS 'position'
في HTML ، يمكنك تعيين موضع العناصر من خلال استخدام ' موقع ' منشأه. يتم تحديد الموضع النهائي لعنصر ما على صفحة الويب من خلال اليمين واليسار والأعلى والأسفل وبالاقتران مع خصائص الفهرس z.
بناء الجملة
صيغة خاصية الموضع هي:
موقع : القيمة
في مكان ' القيمة '، يمكنك تعيين مواضع مختلفة للعناصر مثل المطلقة والنسبية والثابتة واللزجة.
خاصية CSS “z-index”
ال ' الفهرس z 'لتعيين ترتيب مكدس العناصر. يتم وضع العنصر الذي يحتوي على قيمة أكبر لمؤشر z أمام العناصر الأخرى.
بناء الجملة
يكون بناء جملة خاصية z-index كما يلي:
الفهرس z : تلقاءي | رقمفي الصيغة الموضحة أعلاه ، ' تلقاءي 'لضبط الترتيب وفقًا للعنصر الأصل ، بينما بالنسبة للتسلسل اليدوي ،' رقم 'كقيمة لخاصية z-index.
الآن ، دعنا ننتقل إلى المثال العملي لإنشاء divs متداخلة مع CSS.
مثال 1: تداخل الدرجة الثانية مع الأولى
في قسم HTML ، سننشئ قسمين ونخصص أسماء فئات مختلفة كـ ' div1 ' و ' div2 '.
لغة البرمجة
< هيئة >< شعبة صف دراسي = 'div1' > < / شعبة >
< شعبة صف دراسي = 'div2' > < / شعبة >
< / هيئة >
الآن ، انتقل إلى CSS واتبع التعليمات المقدمة:
- عيّن قيمة خاصية الموضع على أنها ' مطلق 'لوضع div1 بالضبط المكان الذي تريده.
- اضبط ارتفاع وعرض div1 على النحو ' 250 بكسل ' و ' 300 بكسل '.
- يتم تعيين قيمة الفهرس z على أنها ' 1 '.
- اضبط لون خلفية div1 على أنه ' RGB (4 ، 3 ، 75) '.
CSS
.div1 {موقع : مطلق ؛
ارتفاع : 250 بكسل ؛
العرض : 300 بكسل ؛
الفهرس z : 1 ؛
معرفتي : RGB ( 4 و 3 و 75 ) ؛
}
انتاج |
تم وضع أول div بنجاح. الآن ، ننتقل إلى div الثاني.
لتداخل div2 ، اتبع التعليمات الموضحة:
- عيّن قيمة خاصية الموضع والعرض والارتفاع لـ div2 مثل ' div1 '.
- عيّن قيمة الفهرس z على أنها ' اثنين 'لوضعه أمام أول div.
- قم بتعيين لون خلفية مختلف لـ div2 كـ ' RGB (0 ، 204 ، 255) '.
- عيّن هامش div2 كـ ' 50 بكسل 'كقيمة الهامش العلوي والقيمة اليسرى للهامش.
- اضبط عتامة div2 على أنها ' 0.7 '.
CSS
.div2 {موقع : مطلق ؛
العرض : 300 بكسل ؛
ارتفاع : 250 بكسل ؛
الفهرس z : 3 ؛
معرفتي : RGB ( 0 و 204 و 255 ) ؛
حافة : 50 بكسل ؛
العتامة : 0.7 ؛
}
انتاج |
يتداخل Div2 بنجاح مع div1.
إذا كنت تريد تعيين div1 فوق div 2 ، فأنت تحتاج فقط إلى تغيير قيمة z-index. دعونا نرى مثالا على ذلك.
مثال 2: تداخل الدرجة الأولى مع الثانية
في هذا المثال ، سنقوم بتغيير قيمة الفهرس z لكل من divs. في ال ' .div1 'فئة ملف CSS ، اضبط قيمة' الفهرس z 'الخاصية كـ' اثنين ':
الفهرس z : اثنين ؛بعد ذلك ، في ' .div2 فئة ، عيّن قيمة ' الفهرس z 'الخاصية كـ' 1 ':
الفهرس z : 1 ؛نتيجة لذلك ، سيتم وضع div الأول أمام div الثاني:
قمنا بتجميع أسهل طريقة لإنشاء قسمي div متداخلين باستخدام CSS.
استنتاج
ال ' موقع ' و ' الفهرس z ”لإنشاء عناصر div متداخلة في CSS. بشكل افتراضي ، تكون قيمة الفهرس z هي 1 ، مما يشير إلى أن عنصر div الذي تم إنشاؤه حديثًا سيتم وضعه أمام عنصر div الحالي. ومع ذلك ، يمكنك تحديد أي قيمة وفقًا لمتطلباتك لضبط التسلسل المتداخل. في هذه المقالة ، قدمنا طرقًا لإنشاء Divs متداخلة مع CSS.