وثائق CSS قابلة للتشغيل: position في CSS

Q: كيف أضع عنصرًا بموضع مطلق بالنسبة إلى أبيه؟

أعطِ الأب position: relative; والابن position: absolute; مع إزاحات مثل top: 0; right: 0;. من دون أب مُموضَع يوضع الابن نسبةً إلى الصفحة.

Q: ما الفرق بين الموضع relative والموضع absolute؟

تبقي relative العنصر في التدفق وتزيح فقط مكان رسمه، تاركة مساحته الأصلية خلفها. أما absolute فتخرجه من التدفق وتضعه نسبةً إلى سلفه المُموضَع.

Q: لماذا لا تعمل position: sticky؟

غالبًا لأحد ثلاثة أسباب: لم تُضبط top (أو إزاحة أخرى)، أو لسلف ما overflow: hidden أو auto فيصبح حاوية التمرير، أو أب العنصر اللاصق ليس أطول منه، فلا يبقى مجال للالتصاق.

Q: ما الفرق بين fixed وsticky؟

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

position: absolute في مثال واحد

العنصر ذو الموضع المطلق يُرفع من التدفق العادي ويوضع عبر top وright وbottom وleft. تُقاس هذه الإزاحات من أقرب سلف له position غير static، ولهذا يأخذ الأب position: relative:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute inside relative</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card {
      position: relative;          /* the reference box */
      width: 260px; padding: 20px;
      background: #f3f4f6; border: 2px solid #111827;
    }
    .badge {
      position: absolute;
      top: 8px;
      right: 8px;
      padding: 2px 8px;
      background: #dc2626; color: white; font-size: 12px; border-radius: 999px;
    }
  </style>
</head>
<body>
  <div class="card" id="card">
    <span class="badge" id="badge">New</span>
    <h3>Card title</h3>
    <p>The badge sits 8px from the top and right edges of the card.</p>
  </div>
</body>
</html>

احذف position: relative من .card وستقفز الشارة إلى أعلى يمين الصفحة كلها، لأنه لم يعد لها سلف مُموضَع. هذا السطر الواحد يفسر معظم أسئلة «position absolute لا تعمل».

أمور يجب معرفتها عن العناصر المطلقة:

لا تشغل مساحة. يُرتَّب العنوان والفقرة كأن الشارة غير موجودة.
يتقلص عرضها ليناسب محتواها، ما لم تضبط width أو left وright معًا.
تُقاس الإزاحات حتى حافة الحشو للكتلة الحاوية، داخل حدها.

قيم position الخمس

القيمة	في التدفق؟	الإزاحات تُقاس من	الاستخدام المعتاد
`static` (الافتراضي)	نعم	الإزاحات تُتجاهل	العناصر العادية
`relative`	نعم، وتُحفظ مساحته	موضعه العادي نفسه	مرجع للأبناء المطلقين، وإزاحات صغيرة
`absolute`	لا	أقرب سلف مُموضَع (أو الصفحة)	الشارات، والتلميحات، والطبقات، وأزرار الإغلاق
`fixed`	لا	نافذة العرض	الترويسات، وأزرار المحادثة، وأشرطة ملفات تعريف الارتباط
`sticky`	نعم	حاوية التمرير، بعد أن يصل إلى الإزاحة	ترويسات الجداول، وعناوين الأقسام، والأشرطة الجانبية

position: relative

العنصر ذو الموضع النسبي يبقى حيث كان في التدفق. الإزاحات تحرك مكان رسمه، لكن مساحته الأصلية تبقى محجوزة، فلا يتحرك شيء حوله:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Relative</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; }
    .row div { width: 80px; padding: 16px 0; text-align: center; background: #bfdbfe; border: 2px solid #2563eb; }
    .row .moved {
      position: relative;
      top: 20px;
      left: 20px;
      background: #fde68a; border-color: #f59e0b;
    }
  </style>
</head>
<body>
  <div class="row">
    <div>1</div>
    <div class="moved" id="moved">2</div>
    <div id="three">3</div>
  </div>
</body>
</html>

يُرسم الصندوق 2 أسفل بمقدار 20px وإلى اليمين بمقدار 20px، فيغطي جزءًا من الصندوق 3، لكن الصندوق 3 لم يتحرك: ما زال يترك مكانًا للصندوق 2 في موضعه الأصلي. نادرًا ما تُستخدم relative وحدها لتحريك الأشياء؛ وظيفتها الأساسية أن تكون الصندوق المرجعي للأبناء المطلقين.

الإزاحات وinset

تقبل top وright وbottom وleft أطوالًا ونسبًا مئوية (من الكتلة الحاوية) وauto. والاختصار inset يضبط الأربعة بترتيب margin نفسه:

.overlay {
  position: absolute;
  inset: 0;              /* top: 0; right: 0; bottom: 0; left: 0; */
}
.corner {
  position: absolute;
  inset: auto 16px 16px auto;  /* bottom right corner, 16px in */
}

ضبط جانبين متقابلين يمطّ العنصر: left: 0; right: 0 تجعله بعرض الكتلة الحاوية. وinset: 0 على ابن مطلق هي الطريقة المعتادة لتغطية بطاقة بطبقة.

التوسيط بـ absolute وtransform

تضع top: 50%; left: 50% الزاوية العلوية اليسرى للعنصر في المركز. ثم يعيده translate(-50%, -50%) بمقدار نصف حجمه:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute centering</title>
  <style>
    .stage { position: relative; height: 180px; background: #e5e7eb; }
    .center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 12px 20px;
      background: #2563eb; color: white; font-family: system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <div class="stage" id="stage"><div class="center" id="c">Centered</div></div>
</body>
</html>

يوسّط flexbox وgrid بطريقة أبسط حين يمكن أن يبقى العنصر في التدفق؛ وتقارن صفحة توسيط div كل الطرق.

position: fixed

العنصر الثابت يوضع نسبةً إلى نافذة العرض ويبقى هناك أثناء تمرير الصفحة:

.chat-button {
  position: fixed;
  bottom: 16px;
  right: 16px;
}

مفاجأتان. العنصر الثابت لا يشغل مساحة، فالترويسة الثابتة تغطي أعلى الصفحة ما لم تضف padding-top إلى body. وإن كان لأي سلف transform أو filter أو perspective، يصبح ذلك السلف الصندوق المرجعي بدل نافذة العرض، فيتمرر العنصر معه.

position: sticky

العنصر اللاصق يتمرر بشكل عادي حتى يصل إلى إزاحته، ثم يلتصق هناك حتى تمر نهاية أبيه. مرّر الصندوق أدناه:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .scroller { height: 220px; overflow-y: auto; border: 2px solid #111827; }
    h3 {
      position: sticky;
      top: 0;
      margin: 0; padding: 8px 12px;
      background: #2563eb; color: white;
    }
    p { margin: 0; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="scroller" id="scroller">
    <section>
      <h3>A</h3>
      <p>Adams</p><p>Allen</p><p>Alvarez</p><p>Anderson</p><p>Arnold</p>
    </section>
    <section>
      <h3>B</h3>
      <p>Baker</p><p>Bell</p><p>Brooks</p><p>Brown</p><p>Bryant</p>
    </section>
    <section>
      <h3>C</h3>
      <p>Campbell</p><p>Carter</p><p>Clark</p><p>Collins</p><p>Cooper</p>
    </section>
  </div>
</body>
</html>

يلتصق كل حرف بأعلى صندوق التمرير ما دام قسمه ظاهرًا، ثم يدفعه الحرف التالي بعيدًا، لأن العنصر اللاصق لا يغادر أباه أبدًا.

حين لا يلتصق sticky، افحص هذه:

لا إزاحة. لا تفعل position: sticky شيئًا من دون top أو bottom أو left أو right.
سلف عليه overflow: hidden أو auto أو scroll. يصبح حاوية التمرير، وإن لم يكن يتمرر فعلًا لا يلتصق شيء. استخدم overflow: clip إن كنت تحتاج فقط إلى إخفاء الفائض.
أب ليس أطول من العنصر اللاصق. لا يبقى مجال للالتصاق داخله.
أب flex أو grid يمطّه. في صف flex، أضف align-self: flex-start إلى الشريط الجانبي اللاصق.

أخطاء شائعة

نسيان position: relative على أب العنصر المطلق.
استخدام absolute لتخطيط الصفحة. العناصر المطلقة تتجاهل بعضها وتتجاهل المحتوى، فيتداخل النص على الشاشات الأصغر. استخدم flexbox أو grid للتخطيط، وabsolute للزخارف الصغيرة.
إزاحات على عنصر static. لا تفعل top: 10px شيئًا من دون position.
الصراع على أي عنصر في الأعلى. العناصر المُموضَعة المتداخلة ترتبها z-index.
ترويسة ثابتة تخفي المحتوى. أضف حشوًا إلى الصفحة، أو scroll-padding-top كي تصل روابط المراسي إلى ما تحتها.

الأسئلة الشائعة

ماذا تفعل position: absolute؟

تخرج العنصر من التدفق العادي (تتصرف العناصر الأخرى كأنه غير موجود) وتضعه عبر top وright وbottom وleft، مقيسة من كتلته الحاوية: أقرب سلف قيمة position فيه ليست static.

كيف أضع عنصرًا بموضع مطلق بالنسبة إلى أبيه؟

أعطِ الأب position: relative; والابن position: absolute; مع إزاحات مثل top: 0; right: 0;. من دون أب مُموضَع يوضع الابن نسبةً إلى الصفحة.

ما الفرق بين الموضع relative والموضع absolute؟

تبقي relative العنصر في التدفق وتزيح فقط مكان رسمه، تاركة مساحته الأصلية خلفها. أما absolute فتخرجه من التدفق وتضعه نسبةً إلى سلفه المُموضَع.

لماذا لا تعمل position: sticky؟

غالبًا لأحد ثلاثة أسباب: لم تُضبط top (أو إزاحة أخرى)، أو لسلف ما overflow: hidden أو auto فيصبح حاوية التمرير، أو أب العنصر اللاصق ليس أطول منه، فلا يبقى مجال للالتصاق.

ما الفرق بين fixed وsticky؟

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

مفاهيم ذات صلة