الخاصية position

من موسوعة حسوب
< CSS
مراجعة 05:50، 29 أكتوبر 2017 بواسطة عبد اللطيف ايمش (نقاش | مساهمات)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)

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

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

/* القيم العامة */
position: inherit;
position: initial;
position: unset;
القيمة الابتدائية static
تُطبَّق على جميع العناصر.
قابلة للوراثة لا
قابلة للتحريك لا
القيمة المحسوبة كما حُدِّدَت.

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

  • العناصر التي يمكن أن يتغير مكانها (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">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">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">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">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>
    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>

شيفرة 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>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>

شيفرة 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;

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

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