عرض مصدر CSS/position

<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> تُحدِّد المكان النهائي لتلك العناصر.

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>static</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|لا
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت.

|}<syntaxhighlight lang="css">
/* الكلمات المفتاحية */
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

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

== أنواع المواضع ==
* العناصر التي يمكن أن يتغير مكانها (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> إزاحة العنصر انطلاقًا مع حدود العنصر الحاوي له (ويكون هذا العنصر عنصرًا كتليًا وأحد آباء العنصر الحالي ويكون موضعه نسبيًا). إذا كان للعنصر هوامش فستضاف إلى الإزاحة.
* العنصر الملتصق (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>[[CSS/top|top]]</code> و <code>[[CSS/bottom|bottom]]</code> (أي قيمتها لا تساوي <code>auto</code>) فالأولوية للخاصية <code>[[CSS/top|top]]</code>.
* إذا ضُبِطَت قيمة الخاصيتين <code>[[CSS/left|left]]</code> و <code>[[CSS/right|right]]</code>، فالأولوية للخاصية <code>[[CSS/left|left]]</code> إذا كان اتجاه النص <code>[[CSS/direction|direction]]</code> من اليسار إلى اليمين <code>ltr</code> (كما في اللغة الإنكليزية)، والأولوية للخاصية <code>[[CSS/right|right]]</code> إن كان اتجاه النص <code>[[CSS/direction|direction]]</code> من اليمين إلى اليسار <code>rtl</code> (كما في اللغة العربية).

== أمثلة ==

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

شيفرة HTML:<syntaxhighlight lang="html">
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>

</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="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;
}
</syntaxhighlight>
=== العناصر ذات الموضع المطلق ===
ستبقى العناصر ذات الموضع النسبي في البنية التنظيمية العادية للمستند، وهذا على النقيض من العناصر ذات الموضع المطلق، التي تؤخذ من سياقها، وبالتالي ستكون البنية التنظيمية للمستند كما لو أنَّ العناصر ذات الموضع المطلق غير موجودة.

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

شيفرة HTML:<syntaxhighlight lang="html">
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="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;
}
</syntaxhighlight>
=== العناصر ذات الموضع الثابت ===
العناصر ذات الموضع الثابت (<code>fixed</code>) شبيهة بالعناصر ذات الموقع المطلقة لكن باستثناء أنَّ العنصر الحاوي لها هو إطار العرض (viewport)، ويمكن أن تُستخدَم هذه العناصر لإنشاء عناصر عائمة في الصفحة التي ستبقى في المكان نفسه حتى بعد التمرير إلى الأسفل.

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

شيفرة HTML:<syntaxhighlight lang="html">
<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>
    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">
.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;
}

</syntaxhighlight>

=== العناصر الملتصقة ===
يمكننا أن نعدّ العناصر الملتصقة (sticky) على أنها هجينة بين العناصر النسبية والثابتة. فالعناصر الملتصقة ستُعامل كأنها عناصر نسبية إلى أن يتم تجاوز حد معيّن، وعند ذاك الحد ستُصبِح هذه العناصر ثابتةً (fixed). فمثلًا الشيفرة:<syntaxhighlight lang="css">
#one { position: sticky; top: 10px; }

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

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

شيفرة HTML:<syntaxhighlight lang="html">
<dl>
  <div>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </div>
  <div>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </div>
  <div>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </div>
  <div>
    <dt>T</dt>
    <dd>Ted Leo &amp; The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </div>
</dl>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="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;
}
</syntaxhighlight>

==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|1.0
|1.0
|4.0
|7.0
|1.0
|-
!القيمة sticky
|56
|32
|غير مدعومة
|42
|6.1 مع السابقة <code>-webkit-</code>
|}

== البنية العامة ==
تقبل الخاصية <code>position</code> كلمةً محجوزةً وحيدةً من الكلمات المذكورة في هذا القسم.
===  <code>static</code> ===
سيكون موضع العنصر محسوبًا بناءً على البنية التنظيمية للمستند، ولن يكون للخاصيات <code>[[CSS/top|top]]</code> و <code>[[CSS/right|right]]</code> و <code>[[CSS/bottom|bottom]]</code> و <code>[[CSS/left|left]]</code> و <code>[[CSS/z-index|z-index]]</code> أي أثر، وهذه هي القيمة الافتراضية.
===  <code>relative</code> ===
سيكون موضع العنصر محسوبًا بناءً على البنية التنظيمية العادية للمستند، ثم سيتم إزاحته نسبةً إلى موضعه الأصلي اعتمادًا على قيم للخاصيات <code>[[CSS/top|top]]</code> و <code>[[CSS/right|right]]</code> و <code>[[CSS/bottom|bottom]]</code> و <code>[[CSS/left|left]]</code>، ولن يكون للإزاحة تأثيرٌ على بقية العناصر، أي أنَّ المساحة المحجوزة للعنصر في تخطيط الصفحة هي نفس المساحة المحجوزة إذا كانت قيمة هذه الخاصية هي <code>static</code>. ويمكن استخدام الخاصية <code>[[CSS/z-index|z-index]]</code> مع العنصر.
=== <code>absolute</code> ===
سيُزال العنصر من البنية التنظيمية للمستند، ولن يُحجَز له مكانٌ في تخطيط الصفحة، وإنما سيتم تحديد موضعه نسبةً إلى أقرب عنصر أب له موضع نسبي، أو إلى العنصر <code>[[HTML/body|<body>]]</code>، وسيُحدَّد موضعه النهائي عبر الخاصيات <code>[[CSS/top|top]]</code> و <code>[[CSS/right|right]]</code> و <code>[[CSS/bottom|bottom]]</code> و <code>[[CSS/left|left]]</code>، ويمكن استخدام الخاصية <code>[[CSS/z-index|z-index]]</code> مع العنصر. ويمكن أن يكون للعناصر المطلقة هوامش <code>[[CSS/margin|margin]]</code>.
===  <code>fixed</code> ===
سيُزال العنصر من البنية التنظيمية للمستند، ولن يُحجَز له مكانٌ في تخطيط الصفحة، وإنما سيتم تحديد موضعه نسبةً إلى إطار العرض (viewport)، وسيُحدَّد موضعه النهائي عبر قيم الخاصيات <code>[[CSS/top|top]]</code> و <code>[[CSS/right|right]]</code> و <code>[[CSS/bottom|bottom]]</code> و <code>[[CSS/left|left]]</code>، ويمكن استخدام الخاصية <code>[[CSS/z-index|z-index]]</code> مع العنصر.  

إذا طُبِعَت الصفحة فسيتوضع العنصر في المكان نفسه في كل صفحة.  
===  <code>sticky</code> ===
سيكون موضع العنصر محسوبًا بناءً على البنية التنظيمية العادية للمستند، ثم سيتم إزاحته نسبةً إلى موضعه الأصلي اعتمادًا على للخاصيات <code>[[CSS/top|top]]</code> و <code>[[CSS/right|right]]</code> و <code>[[CSS/bottom|bottom]]</code> و <code>[[CSS/left|left]]</code>، ولن يكون للإزاحة تأثيرٌ على بقية العناصر.  

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

=== البنية الرسمية ===
<syntaxhighlight lang="css">
position: static | relative | absolute | sticky | fixed;
</syntaxhighlight>
== مصادر ومواصفات ==
* مسودة [https://drafts.csswg.org/css-logical-props/#float-clear CSS Logical Properties Level 1]. أضافت هذه المسودة القيم <code>inline-start</code> و <code>inline-end</code>، لكنها غير مدعومة إلا من قلّة قليلة من المتصفحات.
* مسودة [https://drafts.csswg.org/css-box-3/#float CSS Basic Box Model].
* مواصفة ‎[http://www.w3.org/TR/CSS2/visuren.html#float-position CSS Level 2 (Revision 1)‎].
* مواصفة [http://www.w3.org/TR/CSS1/#float CSS Level 1]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Positioning|{{SUBPAGENAME}}]]