كيفية وضع عنصر ثابت رأسيًا ومطلق أفقيًا

المشكلة:

يسعى المستخدم إلى إنشاء زر يحافظ على مسافة رأسية ثابتة من إطار العرض مع الحفاظ أيضًا على مسافة محددة من الحافة اليمنى لـ div، بغض النظر عن إطار العرض الحجم.

الحل:

الوضع الأفقي:

في حين أن الوضع "الأفقي المطلق" لا يمكن تحقيقه تقنيًا مع ما هو متوفر الحل، يمكن تحقيق هدف الحفاظ على مسافة ثابتة من الحافة اليمنى لـ div. من خلال تجنب تعيين الخصائص اليسرى أو اليمنى للعنصر الثابت أفقيًا، يتم استخدام divs الحاوية للتحكم في موضعه الأفقي.

الموضع العمودي:

يتم تحديد موضع العنصر ثابت رأسياً باستخدام الموضع: خاصية ثابتة. من خلال تعيين قيمة عليا، يتم الحفاظ على الموضع الرأسي بغض النظر عن حجم إطار العرض.

نموذج الكود:

يوضح الكود التالي التنفيذ:

HTML:

CSS:

div.inflow { العرض: 200 بكسل؛ الارتفاع: 1000 بكسل؛ الحدود: 1 بكسل أزرق خالص؛ تعويم: حق؛ الموقف: نسبي؛ الهامش الأيمن: 100 بكسل؛ } div.positioner {الموضع: مطلق؛ صحيح: 0;} شعبة ثابتة { العرض: 80 بكسل؛ الحدود: 1 بكسل أحمر خالص؛ الارتفاع: 100 بكسل؛ الموقف: ثابت؛ أعلى: 60 بكسل؛ الهامش الأيسر: 15 بكسل؛

div.inflow {
  width: 200px;
  height: 1000px;
  border: 1px solid blue;
  float: right;
  position: relative;
  margin-right: 100px;
}
div.positioner {position: absolute; right: 0;}
div.fixed {
  width: 80px;
  border: 1px solid red;
  height: 100px;
  position: fixed;
  top: 60px;
  margin-left: 15px;
}

الاعتبارات الرئيسية:

قد لا يكون div.positioner div ضروريًا إذا كان div div.inflow div له عرض ثابت، مما يسمح بالإعداد المباشر لـ الهامش الأيسر للعنصر الثابت.
• تجاوز الإعداد: مخفي في div الحاوية لا يؤثر على موضع العنصر الثابت خارج حدوده.