تطوير الويب هو فن إنشاء مواقع ويب جميلة وعملية. أحد الجوانب الرئيسية لإنشاء تصميم فريد هو تراكب الكائنات فوق بعضها البعض. يمكن أن يكون هذا مفيدا ، على سبيل المثال ، لإنشاء أشرطة تمرير أو نوافذ مشروطة أو لمجرد إضافة تأثيرات مثيرة للاهتمام إلى الصفحة. في هذه المقالة ، سوف ننظر في كيفية جعل كائن على رأس آخر باستخدام كس.
واحدة من أكثر الطرق فعالية لتراكب الكائنات فوق بعضها البعض هي استخدام تحديد المواقع بقيمة مطلقة أو نسبية. للقيام بذلك ، تحتاج إلى تعيين خصائص كس المناسبة لكل كائن ، مثل الموضع والأعلى واليسار والفهرس ض.
على سبيل المثال ، لتراكب كتلة مع نص على صورة ، يمكنك استخدام رمز كس التالي:
في هذا المثال ، تحتوي الكتلة التي تحتوي على فئة " حاوية الصور "على موضع نسبي ، والكتلة التي تحتوي على فئة" حاوية النص " لها موضع مطلق. تسمح لك القيم المحددة للأعلى واليسار بتوسيط كتلة النص بالنسبة للصورة ، وتحدد خاصية ض-فهرس ترتيب الكائنات المتداخلة ، حيث ستكون القيمة الأعلى أقرب إلى سطح الصفحة.
- طرق لوضع كائن على رأس آخر باستخدام كس
- باستخدام خاصية الموقف
- تطبيق خاصية مؤشر ض
- تحديد المواقع المطلقة والنسبية
- باستخدام خاصية التعتيم
- سؤال وجواب
- كيف يمكنني جعل عنصر واحد وضعه على رأس آخر باستخدام المغلق?
- ما رمز المغلق يجب أن أكتب أن يكون عنصر على رأس آخر?
- ما هو الفرق بين الموقف: النسبي والموقف: مطلق?
- هل من الممكن لجعل عنصر على رأس العنصر الأصل إذا كان لديه 'موقف: ثابت'?
- هل من الممكن استخدام 'ض مؤشر' مع قيمة 'تلقائي'?
- ما هي أفضل طريقة لاستخدامها لجعل عنصر على رأس آخر?
طرق لوضع كائن على رأس آخر باستخدام كس
عند تصميم صفحات الويب ، غالبا ما تنشأ المهمة المتمثلة في وضع كائن فوق كائن آخر. يمكن أن يكون هذا مفيدا عندما تحتاج إلى إنشاء تأثير تراكب أو معلومات منبثقة أو عناصر تفاعلية.
هناك عدة طرق لتحقيق ذلك باستخدام كس:
- باستخدام تحديد المواقع
- باستخدام مؤشر ض
- باستخدام صورة الخلفية
- باستخدام العناصر الزائفة
- باستخدام الجداول
باستخدام الموقف: الملكية المطلقة; يمكنك تعيين الموضع المطلق لعنصر نسبة إلى أقرب أصل له. ثم يمكنك استخدام الخصائص العلوية واليسرى واليمنى والأسفل لتحويل الكائن أفقيا وعموديا بشكل دوري.
الخاصية ض مؤشر يسمح لك لتعيين ترتيب طبقات الكائن. سيتم عرض كائن ذي قيمة مؤشر ض أعلى الكائنات ذات القيمة الأقل. تحتاج إلى التأكد من أن الكائن الذي يجب عرضه فوق الآخر له قيمة مؤشر ض أعلى.
باستخدام خاصية صورة الخلفية وتحديد موضع صورة الخلفية باستخدام خصائص موضع الخلفية وتكرار الخلفية ، يمكنك إنشاء انطباع بأن كائنا واحدا فوق كائن آخر.
العناصر الزائفة ::قبل و:: بعد تسمح لك لإدراج المحتوى قبل أو بعد العنصر المحدد. يمكن استخدام هذا لإنشاء كائنات سيتم عرضها أعلى المحتوى الرئيسي.
إذا تم وضع الكائنات في خلايا الجدول ، فيمكنك استخدام الموضع:مطلق ؛ خاصية لوضع كائن فوق كائن آخر.
باستخدام خاصية الموقف
خاصية الموقف في كس يسمح لك للسيطرة على المواقع من عنصر على صفحة ويب. هناك العديد من القيم الممكنة لهذه الخاصية:
- ثابت (افتراضيا) - يتم وضع العنصر وفقا للتدفق الطبيعي للمستند ولا يمكن نقله باستخدام الخصائص العلوية أو اليمنى أو السفلية أو اليسرى. هذه القيمة هي القيمة الأولية لجميع العناصر دون تحديد قيمة خاصية الموضع بشكل صريح.
- نسبي — يتم وضع العنصر بالنسبة إلى موضعه المعتاد في تدفق المستند. عند استخدام الخصائص العلوية أو اليمنى أو السفلية أو اليسرى ، يتم إزاحة العنصر بالنسبة إلى موضعه الأولي ، لكن مكانه في الدفق لا يتغير ، مما يؤثر على موقع العناصر الأخرى على الصفحة.
- مطلق-يتم وضع العنصر بالنسبة إلى أقرب عنصر أصل له قيمة خاصية موضع محدد بخلاف ثابت. إذا لم يكن هناك مثل هذا العنصر ، فسيتم وضعه بالنسبة إلى نافذة المتصفح نفسها.
- ثابت-يتم وضع العنصر بالنسبة لنافذة المتصفح وسيظل في وضع ثابت حتى عند التمرير في الصفحة. غالبا ما يستخدم هذا النوع من تحديد المواقع لإنشاء قائمة مثبتة أو التنقل.
باستخدام خاصية الموضع ، يمكنك إنشاء مجموعة متنوعة من التأثيرات على صفحة ويب ، على سبيل المثال ، وضع عنصر فوق عنصر آخر أو إصلاح عنصر في موضع معين بالنسبة إلى الشاشة. من خلال الجمع بين خاصية الموضع وخصائص كس الأخرى مثل الأعلى والأسفل واليسار واليمين ، يمكنك تعيين موضع عنصر على الصفحة بدقة وإنشاء تصميم مثير للاهتمام.
تطبيق خاصية مؤشر ض
يتم استخدام الخاصية ض مؤشر في المغلق للتحكم في الترتيب الذي يتم عرض العناصر على صفحة ويب. انها تسمح لك لتحديد العنصر الذي سيكون أمام الآخرين.
يمكن أن تكون قيمة مؤشر ض رقما موجبا أو سالبا. يتم عرض العناصر ذات قيمة مؤشر ض أعلى العناصر ذات القيمة الأقل.
يعد استخدام خاصية ض-فهرس مفيدا بشكل خاص عند العمل مع العناصر الموضوعة ، مثل العناصر ذات الموضع المطلق أو النسبي.
هنا مثال على استخدام خاصية ض مؤشر:
سيتم عرض هذه الكتلة أعلى العناصر الأخرى
سيتم عرض هذه الكتلة خلف الكتلة مع مؤشر ض: 2
في هذا المثال ، سيتم عرض كتلة ذات موضع مطلق وقيمة مؤشر ض 1 خلف كتلة ذات موضع نسبي وقيمة مؤشر ض 2.
,
أسفل
,
أسفل
قد تكون هناك بعض الخصائص الأخرى المتعلقة بالموضع ، على سبيل المثال,
مؤشر ض
,
تجاوز
وغيرها. إنها تسمح لك بالتحكم في شفافية العناصر ، والترتيب الذي يتم عرضها به ، والجوانب الأخرى.
الانتقال: التعتيم 0.5 ثانية سهولة في الخروج;
}
قم بتطبيق الأنماط لتغيير الشفافية عند التمرير فوق المؤشر:
# العنصر: تحوم {
التعتيم: 0.5;
}