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

من موسوعة حسوب
< CSS
→ التعديل السابق
مرئينص الويكي
لا ملخص تعديل
طلا ملخص تعديل
 
(5 مراجعات متوسطة بواسطة 3 مستخدمين غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:الخاصية <code>position</code>}}</noinclude>
<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> تُحدِّد المكان النهائي لتلك العناصر.
الخاصية <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%;"
{| 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>).
* العناصر التي يمكن أن يتغير مكانها (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> الإزاحة الأفقية انطلاقًا من مكانه الأصلي.
* العنصر ذو الموضع النسبي (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>.
* العنصر الملتصق (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>.
تُضبَط عادةً قيم الخاصيتين <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» سيحجز مساحة موضعه الأصلي.
تعطى للعناصر ذات الموضع النسبي إزاحات (offsets) عن موضعها الأصلي ضمن المستند، لكن دون أن تؤثِّر على بقية العناصر. فلاحظ في المثال الآتي أنَّ المربع «Two» سيحجز مساحة موضعه الأصلي.


شيفرة HTML:<syntaxhighlight lang="html">
شيفرة [[HTML]]:<syntaxhighlight lang="html">
<div class="box" id="one">واحد</div>
<div class="box" id="one">واحد</div>
<div class="box" id="two">اثنان</div>
<div class="box" id="two">اثنان</div>
سطر 56: سطر 57:
<div class="box" id="four">أربعة</div>
<div class="box" id="four">أربعة</div>


</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
</syntaxhighlight>شيفرة [[CSS]]:<syntaxhighlight lang="css">
.box {
.box {
   display: inline-block;
   display: inline-block;
سطر 261: سطر 262:


== انظر أيضًا ==
== انظر أيضًا ==
* صفحة الخاصية <code>[[CSS/position|position]]</code> التي تصف كيفية تموضع العنصر في المستند.
* صفحة كل من الخاصيات <code>[[CSS/top|top]]</code>، و <code>[[CSS/bottom|bottom]]</code>، و <code>[[CSS/right|right]]</code>، و <code>[[CSS/left|left]]</code> المسؤولة عن تحديد أماكن العنصر.
* صفحة كل من الخاصيات <code>[[CSS/top|top]]</code>، و<code>[[CSS/bottom|bottom]]</code>، و<code>[[CSS/right|right]]</code> المسؤولة عن تحديد أماكن العنصر.
* صفحة الخاصية <code>[[CSS/float|float]]</code> التي تحدِّد أنَّ العنصر يجب أن يوضع على يسار أو يمين الحاوية التي ينتمي إليها.


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

المراجعة الحالية بتاريخ 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 التي تحدِّد أنَّ العنصر يجب أن يوضع على يسار أو يمين الحاوية التي ينتمي إليها.

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

مجلوبة من «https://wiki.hsoub.com/index.php?title=CSS/position&oldid=32399»