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