CSS/right

الخاصية right في CSS تساهم في تحديد الموضع الأفقي لأحد العناصر التي يمكن أن يتغير مكانها (positioned elements)، وليس لهذه الخاصية تأثير في العناصر التي لا يمكن أن يتغير مكانها (non-positioned elements).

/* <length> قيم */
right: 3px;
right: 2.4em;

/* <percentages> قيم نسبية */
/* تؤخذ نسبةً إلى عرض الكتلة الحاوية للعنصر */
right: 10%;

/* كلمة محجوزة */
right: auto;

/* القيم العامة */
right: inherit;
right: initial;
right: unset;

تأثير الخاصية right يعتمد على قيمة الخاصية position:

• عندما تُضبَط الخاصية position إلى القيمة absolute أو fixed، فستُحدِّد الخاصية right المسافة بين الحافة اليمنى للعنصر وبين الحافة اليمنى للكتلة الحاوية له (containing block).
• عندما تُضبَط الخاصية position إلى relative، فستُحدِّد الخاصية right المسافة التي ستنتقل وفقها الحافة اليمنى للعنصر فوق مكانها الطبيعي.
• عندما تُضبَط الخاصية position إلى sticky، فستعمل الخاصية right كما لو أنَّ موضع العنصر relative عندما يكون ظاهرًا ضمن إطار العرض (viewport)، وستعمل كما لو أنَّه fixed عندما لا يكون ظاهرًا ضمن إطار العرض.
• عندما تُضبَط الخاصية position إلى static (أي أنَّ العنصر لا يمكن أن يغيّر مكانه)، فلن يكون للخاصية right أيّ تأثير.

عند تحديد قيم للخاصيتين right و left، فإنَّ موضع العنصر قد حُدِّد بأكثر من طريقة، وسيكون للخاصية left أولوية في الحاويات التي يكون اتجاهها من اليسار إلى اليمين، وسيكون للخاصية right الأولوية في الحاويات التي يكون اتجاهها من اليمين إلى اليسار.

القيمة الابتدائية	auto
تُطبَّق على	العناصر التي يمكن أن يتغير مكانها (positioned elements).
قابلة للوراثة	لا
قابلة للتحريك	نعم
القيمة المحسوبة	كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى مطلقة.

أمثلة

يبيّن هذا المثال استخدام الكلمة المحجوزة auto مع عنصر <div> موضعه مطلق (absolute):

<div class="parent">
    <span>parent container</span>
    <div class="actual">Actual position</div>
</div>

شيفرة CSS:

.parent {
  background-color: #f8f9fa;
  padding: 1em;
  height: 150px;
}

.actual {
  position: absolute;
  right: auto;

  background-color: #310736;
  color: white;
  box-sizing: border-box;
  width: 250px;
  height: 2em;
  padding: 0.25em;
  text-align: center;
  opacity: 0.9;
}

مثال عن استخدم قيمة طولية <length> مع تحديد موضع العنصر إلى نسبي relative عبر الخاصية position، لاحظ كيف سيتحرّك العنصر إلى اليسار نسبةً إلى موضعه الأصلي:

.parent {
  background-color: #f8f9fa;
  padding: 1em;
  height: 150px;
}

.actual {
  position: relative;
  right: 20px;

  background-color: #310736;
  color: white;
  box-sizing: border-box;
  width: 250px;
  height: 2em;
  padding: 0.25em;
  text-align: center;
  opacity: 0.9;
}

أما هذا المثال، فهو عن استخدام الخاصية right مع عنصر موضعه مطلق:

.parent {
  background-color: #f8f9fa;
  padding: 1em;
  height: 150px;
  position: relative;
}

.actual {
  position: absolute;
  right: 0;

  background-color: #310736;
  color: white;
  box-sizing: border-box;
  width: 250px;
  height: 2em;
  padding: 0.25em;
  text-align: center;
  opacity: 0.9;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	5.5	5	1.0

البنية العامة

القيمة <length>

قيمة طولية <length> سالبة أو موجبة تمثِّل:

• المسافة بين الحافة اليسرى للعنصر وبين الحافة اليمنى للكتلة الحاوية له (containing block)؛ وذلك إذا كان موضع العنصر مطلقًا (absolutely positioned)
• المسافة التي ستنتقل وفقها الحافة اليمنى للعنصر فوق مكانها الطبيعي؛ وذلك إذا كان موضع العنصر نسبيًا (relatively positioned).

القيمة <percentage>

نسبة مئوية من ارتفاع الكتلة الحاوية على العنصر.

القيمة auto

• إذا كان موضع العنصر مطلقًا، فهذه القيمة ستؤدي إلى تحديد موضع العنصر اعتمادًا على قيمة الخاصية left.
• إذا كان موضع العنصر نسبيًا، فهذه القيمة ستؤدي إلى تحديد موضع العنصر اعتمادًا على قيمة الخاصية left انطلاقًا من موضع العنصر الابتدائي، وإذا كانت قيمة الخاصية left تساوي auto أيضًا، فلن يتحرك العنصر أفقيًا.

البنية الرسمية

right: <length> | <percentage> | auto;

مصادر ومواصفات

• مسودة CSS Transitions.
• مواصفة ‎CSS Level 2 (Revision 1)‎.