الفرق بين المراجعتين لصفحة: «CSS/position»

مراجعة 16:16، 5 يوليو 2018

الخاصية position في CSS تصف كيف يجب أن يتموضع العنصر في المستند، والخاصيات top و right و bottom و left تُحدِّد المكان النهائي لتلك العناصر.

بطاقة الخاصية

القيمة الابتدائية	`static`
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت.

/* الكلمات المفتاحية */
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

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

أنواع المواضع

العناصر التي يمكن أن يتغير مكانها (positioned elements) هي التي تكون قيمة الخاصية position التابعة لها إما relative أو absolute أو fixed أو sticky (بصيغة أخرى: أيّ قيمة ما عدا static).
العنصر ذو الموضع النسبي (relatively positioned element) هو العنصر الذي تكون قيمة الخاصية position هي relative، وتُحدِّد الخاصيتان top و bottom الإزاحة الرأسية انطلاقًا من مكانه الأصلي، وتُحدِّد الخاصيتان left و right الإزاحة الأفقية انطلاقًا من مكانه الأصلي.
العنصر ذو الموضع المطلق (absolutely positioned element) هو العنصر الذي تكون قيمة الخاصية position هي relative أو fixed، وتُحدِّد الخاصيات top و right و bottom و left إزاحة العنصر انطلاقًا مع حدود العنصر الحاوي له (ويكون هذا العنصر عنصرًا كتليًا وأحد آباء العنصر الحالي ويكون موضعه نسبيًا). إذا كان للعنصر هوامش فستضاف إلى الإزاحة.
العنصر الملتصق (stickily positioned element) هو العنصر الذي تكون قيمة الخاصية position هي sticky، وسيتم التعامل مع العنصر كما لو أنَّه relative وبعد تجاوز حد معيّن عند التمرير فسيُعامَل على أنه fixed.

تُضبَط عادةً قيم الخاصيتين height و width في العناصر ذات الموضع المطلق إلى القيمة auto لكي تتسع لمحتوياتها، لكن يمكن إذا لم يكن موضع العنصر مطلقًا ضبط قيمة الخاصيتين top و bottom وترك الخاصية height دون تحديد (أي ستكون قيمتها هي القيمة الافتراضية auto)، مما يجعل العنصر يملأ المساحة الرأسية المتاحة. ويمكن فعل المثل لملأ المساحة الأفقية بتحديد قيمة الخاصيتين left و right مع ترك قيمة الخاصية width إلى auto.

إذا تم تحديد الارتفاع height أو العرض width فستُطبَّق القواعد الآتية:

إذا ضُبِطَت قيمة الخاصيتين top و bottom (أي قيمتها لا تساوي auto) فالأولوية للخاصية top.
إذا ضُبِطَت قيمة الخاصيتين left و right، فالأولوية للخاصية left إذا كان اتجاه النص direction من اليسار إلى اليمين ltr (كما في اللغة الإنكليزية)، والأولوية للخاصية right إن كان اتجاه النص direction من اليمين إلى اليسار rtl (كما في اللغة العربية).

أمثلة

العناصر ذات الموضع النسبي

تعطى للعناصر ذات الموضع النسبي إزاحات (offsets) عن موضعها الأصلي ضمن المستند، لكن دون أن تؤثِّر على بقية العناصر. فلاحظ في المثال الآتي أنَّ المربع «Two» سيحجز مساحة موضعه الأصلي.

شيفرة HTML:

<div class="box" id="one">واحد</div>
<div class="box" id="two">اثنان</div>
<div class="box" id="three">ثلاثة</div>
<div class="box" id="four">أربعة</div>

شيفرة CSS:

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 0.25em;
  background-color: salmon;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background-color: #006699;
}

العناصر ذات الموضع المطلق

ستبقى العناصر ذات الموضع النسبي في البنية التنظيمية العادية للمستند، وهذا على النقيض من العناصر ذات الموضع المطلق، التي تؤخذ من سياقها، وبالتالي ستكون البنية التنظيمية للمستند كما لو أنَّ العناصر ذات الموضع المطلق غير موجودة.

سيُعرّف مكان العناصر ذات الموضع المطلق نسبةً إلى أوّل عنصر أب له موضع خاص (أي أقرب أب ليس لا يكون موضعه static). وإذا لم يكن هنالك أب لهذا العنصر له موضع نسبي، فسيكون موضعه نسبةً إلى العنصر <body> في المستند.

شيفرة HTML:

<div class="box" id="one">واحد</div>
<div class="box" id="two">اثنان</div>
<div class="box" id="three">ثلاثة</div>
<div class="box" id="four">أربعة</div>

شيفرة CSS:

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 0.25em;
  background-color: salmon;
  color: white;
  position: relative;
}

#two {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: #006699;
}

العناصر ذات الموضع الثابت

العناصر ذات الموضع الثابت (fixed) شبيهة بالعناصر ذات الموقع المطلقة لكن باستثناء أنَّ العنصر الحاوي لها هو إطار العرض (viewport)، ويمكن أن تُستخدَم هذه العناصر لإنشاء عناصر عائمة في الصفحة التي ستبقى في المكان نفسه حتى بعد التمرير إلى الأسفل.

في المثال الآتي سيُعرَض العنصر «One» على بعد 80 بكسل من أعلى الصفحة و 10 بكسلات من يسارها، وحتى لو مررت إلى الأسفل فسيبقى العنصر في المكان نفسه نسبةً إلى إطار العرض.

شيفرة HTML:

<div class="outer">
  <p>
   حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.


  </p>
  <div class="box" id="one">واحد</div>
</div>

شيفرة CSS:

.box {
  width: 100px;
  height: 100px;
  padding: 0.25em;
  background-color: salmon;
  color: white;
}

#one {
  position: fixed;
  top: 80px;
  left: 10px;
  background-color: #006699;
}

.outer {
  width: 500px;
  height: 300px;
  overflow: scroll;
  padding-left: 150px;
}

العناصر الملتصقة

يمكننا أن نعدّ العناصر الملتصقة (sticky) على أنها هجينة بين العناصر النسبية والثابتة. فالعناصر الملتصقة ستُعامل كأنها عناصر نسبية إلى أن يتم تجاوز حد معيّن، وعند ذاك الحد ستُصبِح هذه العناصر ثابتةً (fixed). فمثلًا الشيفرة:

#one { position: sticky; top: 10px; }

ستؤدي إلى جعل العنصر ذي المعرِّف one نسبيًا إلى أن يتم التمرير حتى يبقى أقل من 10 بكسل من أعلى هذا العنصر، وبعد ذلك الحد سيكون العنصر ثابتًا ويقع على بعد 10 بكسل من أعلى إطار العرض.

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

شيفرة HTML:

<dl>
  <div>
    <dt>أ</dt>
    <dd>أخذ</dd>
    <dd>أدب</dd>
    <dd>أرب</dd>
    <dd>أكل</dd>
    <dd>أهل</dd>
  </div>
  <div>
    <dt>ب</dt>
    <dd>باب</dd>
    <dd>براء</dd>
    <dd>بقاء</dd>
    <dd>بقال</dd>
    <dd>بياع</dd>
  </div>
  <div>
    <dt>ج</dt>
    <dd>جمل</dd>
  </div>
  <div>
    <dt>ن</dt>
    <dd>نار</dd>
    <dd>نبيل</dd>
    <dd>نجل</dd>
    <dd>نقل</dd>
    <dd>نوال</dd>
  </div>
</dl>

شيفرة CSS:

* {
  box-sizing: border-box;
}

dl > div {
  background: #FFF;
  padding: 24px 0 0 0;
}

dt {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #CCC;
}

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

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	4.0	7.0	1.0
القيمة sticky	56	32	غير مدعومة	42	6.1 مع السابقة `-webkit-`

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

تقبل الخاصية position كلمةً محجوزةً وحيدةً من الكلمات المذكورة في هذا القسم.

`static`

سيكون موضع العنصر محسوبًا بناءً على البنية التنظيمية للمستند، ولن يكون للخاصيات top و right و bottom و left و z-index أي أثر، وهذه هي القيمة الافتراضية.

`relative`

سيكون موضع العنصر محسوبًا بناءً على البنية التنظيمية العادية للمستند، ثم سيتم إزاحته نسبةً إلى موضعه الأصلي اعتمادًا على الخاصيات top و right و bottom و left، ولن يكون للإزاحة تأثيرٌ على بقية العناصر، أي أنَّ المساحة المحجوزة للعنصر في تخطيط الصفحة هي نفس المساحة المحجوزة إذا كانت هذه الخاصية هي static. ويمكن استخدام الخاصية z-index مع العنصر.

`absolute`

سيُزال العنصر من البنية التنظيمية للمستند، ولن يُحجَز له مكانٌ في تخطيط الصفحة، وإنما سيتم تحديد موضعه نسبةً إلى أقرب عنصر أب له موضع نسبي، أو إلى العنصر <body>، وسيُحدَّد موضعه النهائي عبر الخاصيات top و right و bottom و left، ويمكن استخدام الخاصية z-index مع العنصر. ويمكن أن يكون للعناصر المطلقة هوامش margin.

`fixed`

سيُزال العنصر من البنية التنظيمية للمستند، ولن يُحجَز له مكانٌ في تخطيط الصفحة، وإنما سيتم تحديد موضعه نسبةً إلى إطار العرض (viewport)، وسيُحدَّد موضعه النهائي عبر الخاصيات top و right و bottom و left، ويمكن استخدام الخاصية z-index مع العنصر.

إذا طُبِعَت الصفحة فسيتوضع العنصر في المكان نفسه في كل صفحة.

`sticky`

سيكون موضع العنصر محسوبًا بناءً على البنية التنظيمية العادية للمستند، ثم سيتم إزاحته نسبةً إلى موضعه الأصلي اعتمادًا على الخاصيات top و right و bottom و left، ولن يكون للإزاحة تأثيرٌ على بقية العناصر.

عند التمرير إلى حدٍّ معيّن فسيتحوّل سلوك العنصر إلى ما يشبه السلوك الناتج عن fixed.

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

position: static | relative | absolute | sticky | fixed;

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

مسودة CSS Logical Properties Level 1. أضافت هذه المسودة القيم inline-start و inline-end، لكنها غير مدعومة إلا من قلّة قليلة من المتصفحات.
مسودة CSS Basic Box Model.
مواصفة ‎CSS Level 2 (Revision 1)‎.
مواصفة CSS Level 1.