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

المراجعة الحالية بتاريخ 11:16، 7 أكتوبر 2022

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

دورة تطوير واجهات المستخدم

72 ساعة فيديو تدريبية
من الصفر دون الحاجة لخبرة مسبقة
شهادة معتمدة من أكاديمية حسوب
متابعة أثناء الدورة من فريق مختص

اشترك الآن

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

القيمة الابتدائية	`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 هي absolute أو 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;

انظر أيضًا

صفحة كل من الخاصيات top، و bottom، و right، و left المسؤولة عن تحديد أماكن العنصر.
صفحة الخاصية float التي تحدِّد أنَّ العنصر يجب أن يوضع على يسار أو يمين الحاوية التي ينتمي إليها.

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

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

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>position</code>}}</noinclude>
 الخاصية <code>position</code> في CSS تصف كيف يجب أن يتموضع العنصر في المستند، والخاصيات <code>[[CSS/top|top]]</code> و <code>[[CSS/right|right]]</code> و <code>[[CSS/bottom|bottom]]</code> و <code>[[CSS/left|left]]</code> تُحدِّد المكان النهائي لتلك العناصر.
+{{Course|course=frontend}}
+__TOC__
 == بطاقة الخاصية ==
 {| class="wikitable" style="width: 100%;"
@@ سطر 37: / سطر 38: @@
 * العناصر التي يمكن أن يتغير مكانها (positioned elements) هي التي تكون قيمة الخاصية <code>position</code> التابعة لها إما <code>relative</code> أو <code>absolute</code> أو <code>fixed</code> أو <code>sticky</code> (بصيغة أخرى: أيّ قيمة ما عدا <code>static</code>).
 * العنصر ذو الموضع النسبي (relatively positioned element) هو العنصر الذي تكون قيمة الخاصية <code>position</code> هي <code>relative</code>، وتُحدِّد الخاصيتان <code>[[CSS/top|top]]</code> و <code>[[CSS/bottom|bottom]]</code> الإزاحة الرأسية انطلاقًا من مكانه الأصلي، وتُحدِّد الخاصيتان <code>[[CSS/left|left]]</code> و <code>[[CSS/right|right]]</code> الإزاحة الأفقية انطلاقًا من مكانه الأصلي.
-* العنصر ذو الموضع المطلق (absolutely positioned element) هو العنصر الذي تكون قيمة الخاصية <code>position</code> هي <code>relative</code> أو <code>fixed</code>، وتُحدِّد الخاصيات <code>[[CSS/top|top]]</code> و <code>[[CSS/right|right]]</code> و <code>[[CSS/bottom|bottom]]</code> و <code>[[CSS/left|left]]</code> إزاحة العنصر انطلاقًا مع حدود العنصر الحاوي له (ويكون هذا العنصر عنصرًا كتليًا وأحد آباء العنصر الحالي ويكون موضعه نسبيًا). إذا كان للعنصر هوامش فستضاف إلى الإزاحة.
+* العنصر ذو الموضع المطلق (absolutely positioned element) هو العنصر الذي تكون قيمة الخاصية <code>position</code> هي <code>absolute</code> أو <code>fixed</code>، وتُحدِّد الخاصيات <code>[[CSS/top|top]]</code> و <code>[[CSS/right|right]]</code> و <code>[[CSS/bottom|bottom]]</code> و <code>[[CSS/left|left]]</code> إزاحة العنصر انطلاقًا مع حدود العنصر الحاوي له (ويكون هذا العنصر عنصرًا كتليًا وأحد آباء العنصر الحالي ويكون موضعه نسبيًا). إذا كان للعنصر هوامش فستضاف إلى الإزاحة.
 * العنصر الملتصق (stickily positioned element) هو العنصر الذي تكون قيمة الخاصية <code>position</code> هي <code>sticky</code>، وسيتم التعامل مع العنصر كما لو أنَّه <code>relative</code> وبعد تجاوز حد معيّن عند التمرير فسيُعامَل على أنه <code>fixed</code>.
 تُضبَط عادةً قيم الخاصيتين <code>[[CSS/height|height]]</code> و <code>[[CSS/width|width]]</code> في العناصر ذات الموضع المطلق إلى القيمة <code>auto</code> لكي تتسع لمحتوياتها، لكن يمكن إذا لم يكن موضع العنصر مطلقًا ضبط قيمة الخاصيتين <code>[[CSS/top|top]]</code> و <code>[[CSS/bottom|bottom]]</code> وترك الخاصية <code>[[CSS/height|height]]</code> دون تحديد (أي ستكون قيمتها هي القيمة الافتراضية <code>auto</code>)، مما يجعل العنصر يملأ المساحة الرأسية المتاحة. ويمكن فعل المثل لملأ المساحة الأفقية بتحديد قيمة الخاصيتين <code>left</code> و <code>right</code> مع ترك قيمة الخاصية <code>[[CSS/width|width]]</code> إلى <code>auto</code>.
@@ سطر 50: / سطر 51: @@
 تعطى للعناصر ذات الموضع النسبي إزاحات (offsets) عن موضعها الأصلي ضمن المستند، لكن دون أن تؤثِّر على بقية العناصر. فلاحظ في المثال الآتي أنَّ المربع «Two» سيحجز مساحة موضعه الأصلي.
-شيفرة HTML:<syntaxhighlight lang="html">
+شيفرة [[HTML]]:<syntaxhighlight lang="html">
-<div class="box" id="one">One</div>
+<div class="box" id="one">واحد</div>
-<div class="box" id="two">Two</div>
+<div class="box" id="two">اثنان</div>
-<div class="box" id="three">Three</div>
+<div class="box" id="three">ثلاثة</div>
-<div class="box" id="four">Four</div>
+<div class="box" id="four">أربعة</div>
-</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
+</syntaxhighlight>شيفرة [[CSS]]:<syntaxhighlight lang="css">
 .box {
    display: inline-block;
@@ سطر 79: / سطر 80: @@
 شيفرة HTML:<syntaxhighlight lang="html">
-<div class="box" id="one">One</div>
+<div class="box" id="one">واحد</div>
-<div class="box" id="two">Two</div>
+<div class="box" id="two">اثنان</div>
-<div class="box" id="three">Three</div>
+<div class="box" id="three">ثلاثة</div>
-<div class="box" id="four">Four</div>
+<div class="box" id="four">أربعة</div>
 </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
 .box {
@@ سطر 109: / سطر 110: @@
 <div class="outer">
    <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+   حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.
-    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
-    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
-    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
-    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
-    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
-    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
    </p>
-  <p>
+   <div class="box" id="one">واحد</div>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
-    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
-    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
-    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
-    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
-    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
-    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
-  </p>
-   <div class="box" id="one">One</div>
 </div>
 </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
@@ سطر 164: / سطر 152: @@
 <dl>
    <div>
-     <dt>A</dt>
+     <dt>أ</dt>
-     <dd>Andrew W.K.</dd>
+     <dd>أخذ</dd>
-     <dd>Apparat</dd>
+     <dd>أدب</dd>
-     <dd>Arcade Fire</dd>
+     <dd>أرب</dd>
-     <dd>At The Drive-In</dd>
+     <dd>أكل</dd>
-     <dd>Aziz Ansari</dd>
+     <dd>أهل</dd>
    </div>
    <div>
-     <dt>C</dt>
+     <dt>ب</dt>
-     <dd>Chromeo</dd>
+     <dd>باب</dd>
-     <dd>Common</dd>
+     <dd>براء</dd>
-     <dd>Converge</dd>
+     <dd>بقاء</dd>
-     <dd>Crystal Castles</dd>
+     <dd>بقال</dd>
-     <dd>Cursive</dd>
+     <dd>بياع</dd>
    </div>
    <div>
-     <dt>E</dt>
+     <dt>ج</dt>
-     <dd>Explosions In The Sky</dd>
+     <dd>جمل</dd>
    </div>
    <div>
-     <dt>T</dt>
+     <dt>ن</dt>
-     <dd>Ted Leo &amp; The Pharmacists</dd>
+     <dd>نار</dd>
-     <dd>T-Pain</dd>
+     <dd>نبيل</dd>
-     <dd>Thrice</dd>
+     <dd>نجل</dd>
-     <dd>TV On The Radio</dd>
+     <dd>نقل</dd>
-     <dd>Two Gallants</dd>
+     <dd>نوال</dd>
    </div>
 </dl>
@@ سطر 272: / سطر 260: @@
 position: static | relative | absolute | sticky | fixed;
 </syntaxhighlight>
+== انظر أيضًا ==
+* صفحة كل من الخاصيات <code>[[CSS/top|top]]</code>، و <code>[[CSS/bottom|bottom]]</code>، و <code>[[CSS/right|right]]</code>، و <code>[[CSS/left|left]]</code> المسؤولة عن تحديد أماكن العنصر.
+* صفحة الخاصية <code>[[CSS/float|float]]</code> التي تحدِّد أنَّ العنصر يجب أن يوضع على يسار أو يمين الحاوية التي ينتمي إليها.
 == مصادر ومواصفات ==
 * مسودة [https://drafts.csswg.org/css-logical-props/#float-clear CSS Logical Properties Level 1]. أضافت هذه المسودة القيم <code>inline-start</code> و <code>inline-end</code>، لكنها غير مدعومة إلا من قلّة قليلة من المتصفحات.