وثائق CSS قابلة للتشغيل: z-index في CSS

Q: لماذا لا تعمل z-index عندي؟

إما أن العنصر غير مُموضَع (تحتاج z-index إلى position غير static، أو إلى ابن flex أو grid)، أو أنه داخل أب يشكّل سياق تراكب بترتيب أدنى. لا يمكن لابن أبدًا أن يرتفع فوق عنصر وُضع سياقُ تراكبه تحته، مهما كانت z-index الخاصة به.

Q: هل تعمل z-index من دون position؟

ليس على العناصر الكتلية أو السطرية العادية: position: static تتجاهلها. لكنها تعمل على عناصر flex وgrid من دون أي position.

ماذا تفعل z-index

حين تتداخل العناصر، تقرر z-index أيها يُرسم في الأمام. الرقم الأعلى يفوز. تعمل على العناصر المُموضَعة (أي position عدا static) وعلى عناصر flex وgrid:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>z-index</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .stage { position: relative; height: 170px; }
    .card {
      position: absolute;
      width: 130px; height: 100px; padding: 8px;
      color: white; font-weight: 600; border-radius: 8px;
    }
    .a { background: #2563eb; top: 0; left: 0; z-index: 3; }
    .b { background: #16a34a; top: 30px; left: 60px; z-index: 1; }
    .c { background: #f59e0b; top: 60px; left: 120px; z-index: 2; }
  </style>
</head>
<body>
  <div class="stage">
    <div class="card a" id="a">A z-index: 3</div>
    <div class="card b" id="b">B z-index: 1</div>
    <div class="card c" id="c">C z-index: 2</div>
  </div>
</body>
</html>

من دون z-index تُرسم العناصر اللاحقة في HTML فوق السابقة، فيغطي C العنصر B، ويغطي B العنصر A. قيم z-index تعكس ذلك: A في الأمام، ثم C، ثم B.

القيم

القيمة	المعنى
`auto` (الافتراضي)	يتراكب في المستوى 0 مع إخوته، ولا ينشئ سياق تراكب
`0`	المستوى 0، لكنه ينشئ سياق تراكب
عدد صحيح موجب	أمام القيم الأدنى
عدد صحيح سالب	خلف المستوى 0، وخلف محتوى الأب إن كان الأب يشكّل سياق التراكب

الأعداد الصحيحة وحدها صالحة: z-index: 1.5 تُتجاهل.

لماذا قد تخسر z-index 9999: سياقات التراكب

لا تُقارن قيم z-index عبر الصفحة كلها. تُجمع العناصر في سياقات تراكب، وz-index ترتّب العناصر داخل السياق نفسه فقط. ثم يوضع السياق نفسه كطبقة واحدة، باستخدام z-index للعنصر الذي أنشأه.

أدناه، للقائمة المنسدلة الزرقاء z-index: 9999، لكنها تعيش داخل ترويسة لها z-index: 1. والشريط الأخضر، وهو أخ لتلك الترويسة، له z-index: 2. طبقة الترويسة كلها، بما فيها القائمة المنسدلة، تحت الشريط:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Stacking context</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .header {
      position: relative;
      z-index: 1;                 /* creates a stacking context */
      height: 40px; padding: 10px; background: #e5e7eb;
    }
    .dropdown {
      position: absolute;
      top: 40px; left: 20px;
      z-index: 9999;              /* only counts inside .header */
      width: 180px; height: 110px; padding: 8px;
      background: #2563eb; color: white;
    }
    .banner {
      position: relative;
      z-index: 2;
      margin-top: 20px; height: 60px; padding: 10px;
      background: #16a34a; color: white;
    }
    .no-context .header { z-index: auto; }
  </style>
</head>
<body>
  <div id="page">
    <div class="header">Header, z-index: 1
      <div class="dropdown" id="dropdown">Dropdown, z-index: 9999</div>
    </div>
    <div class="banner" id="banner">Banner, z-index: 2</div>
  </div>
  <p><button type="button" id="fix">Set the header's z-index to auto</button> <span id="out"></span></p>
  <script>
    const report = () => {
      const r = document.getElementById('banner').getBoundingClientRect();
      const top = document.elementFromPoint(r.left + 60, r.top + 20);
      document.getElementById('out').textContent = 'On top at the overlap: ' + top.id;
    };
    document.getElementById('fix').addEventListener('click', () => {
      document.getElementById('page').classList.toggle('no-context');
      report();
    });
    report();
  </script>
</body>
</html>

اضغط الزر. مع z-index: auto لا تعود الترويسة تشكّل سياق تراكب، فتُقارن 9999 الخاصة بالقائمة المنسدلة مع 2 الخاصة بالشريط مباشرة، فتأتي القائمة إلى الأمام. رفع القائمة إلى 99999 ما كان ليساعد أبدًا.

ما الذي ينشئ سياق تراكب

أي من هذه يحوّل العنصر إلى سياق تراكب خاص به، فيحبس z-index لكل ما بداخله:

الخاصية	الشرط
`position: relative` أو `absolute`	مع `z-index` غير `auto`
`position: fixed` أو `sticky`	دائمًا
عنصر flex أو grid	مع `z-index` غير `auto`
`opacity`	أقل من 1
`transform`، `scale`، `rotate`، `translate`	أي قيمة غير `none`
`filter`، `backdrop-filter`	أي قيمة غير `none`
`isolation`	`isolate`
`mix-blend-mode`	أي قيمة غير `normal`
`will-change`	حين تسمّي أيًا من الخصائص أعلاه
`contain`	`layout` أو `paint` (و`strict` و`content`)

المفاجئتان هما opacity وtransform: إضافة تلاشٍ أو حركة تمرير إلى أب قد تضع قائمته المنسدلة فجأة خلف القسم التالي.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>opacity creates a context</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 0; }
    .col { position: relative; width: 160px; height: 120px; padding: 8px; background: #e5e7eb; }
    .col + .col { background: #fde68a; }
    .tip {
      position: absolute; top: 40px; left: 100px; z-index: 10;
      width: 120px; padding: 8px; background: #2563eb; color: white;
    }
    .faded { opacity: 0.99; }
  </style>
</head>
<body>
  <div class="row">
    <div class="col faded" id="first">opacity: 0.99
      <div class="tip" id="tip">Tooltip z-index: 10</div>
    </div>
    <div class="col" id="second">Next column</div>
  </div>
  <p id="out"></p>
  <script>
    const r = document.getElementById('second').getBoundingClientRect();
    document.getElementById('out').textContent =
      'On top in the overlap: ' + document.elementFromPoint(r.left + 30, r.top + 60).id;
  </script>
</body>
</html>

يُفترض أن تضع z-index: 10 التلميح فوق العمود التالي. لكن opacity: 0.99 تجعل العمود الأول سياق تراكب بقيمة z-index تساوي auto (المستوى 0)، والعمود الثاني يأتي لاحقًا في HTML في المستوى نفسه، فيُطلى فوق العمود الأول كله، بما فيه التلميح. احذف سطر opacity وسيعود التلميح إلى الأمام.

z-index السالبة

تضع z-index السالبة العنصر خلف إخوته. وإن لم يكن الأب يشكّل سياق تراكب، قد يذهب حتى خلف خلفية الأب، وهذه مفاجأة شائعة. تنشئ isolation: isolate على الأب سياقًا من دون أي أثر بصري آخر، وتبقي الابن السالب داخله:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Negative z-index</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; display: flex; gap: 24px; }
    .button {
      position: relative;
      padding: 14px 20px; background: #e5e7eb; font-weight: 600;
    }
    .button::before {
      content: "";
      position: absolute; inset: -6px;
      background: #f59e0b;
      z-index: -1;               /* behind the button's text */
    }
    .isolated { isolation: isolate; }
  </style>
</head>
<body>
  <div class="button">No isolation</div>
  <div class="button isolated">isolation: isolate</div>
</body>
</html>

من دون isolation يسقط الإطار الكهرماني خلف الخلفية الرمادية للزر نفسه، فلا تظهر إلا حافته. ومع isolation: isolate يبقى الإطار داخل سياق تراكب الزر: فوق خلفيته، وتحت نصه.

مقياس z-index

اختر بضع طبقات مسماة للموقع كله بدل تصعيد الأرقام:

:root {
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-toast: 50;
}
.modal { position: fixed; z-index: var(--z-modal); }

معظم أخطاء الطبقات أخطاء في سياقات التراكب لا في الأرقام، لذلك يفيد كثيرًا مقياس صغير مع isolation: isolate على المكونات التي تستخدم z-index داخليًا. تحتاج z-index إلى الموضعة كي تعمل؛ وتشرح صفحة position ذلك.

أخطاء شائعة

z-index على عنصر static. أضف position: relative (أو اجعله عنصر flex أو grid).
التصعيد إلى 9999. إن شكّل أب سياق تراكب تحت المنافس، فلا قيمة لابن تستطيع الفوز. ابحث عن السياق بدلًا من ذلك.
opacity أو transform أو filter جديدة على أب تحبس قائمته المنسدلة فجأة.
قيم عشرية. z-index: 1.5 غير صالحة.
توقع أن تتصرف z-index: 0 وauto بالطريقة نفسها. 0 تنشئ سياق تراكب؛ وauto لا تنشئ.
نوافذ منبثقة داخل مكونات متداخلة بعمق. اعرضها قرب نهاية <body> (أو استخدم الطبقة العليا للعنصر <dialog>)، كي لا يحبسها أي سياق سلف.

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

ماذا تفعل z-index؟

تضبط ترتيب تراكب العناصر المتداخلة: القيمة الأعلى تُرسم أمام الأدنى ضمن سياق التراكب نفسه. الافتراضي auto، والقيم أعداد صحيحة، بما فيها السالبة.

لماذا لا تعمل z-index عندي؟

إما أن العنصر غير مُموضَع (تحتاج z-index إلى position غير static، أو إلى ابن flex أو grid)، أو أنه داخل أب يشكّل سياق تراكب بترتيب أدنى. لا يمكن لابن أبدًا أن يرتفع فوق عنصر وُضع سياقُ تراكبه تحته، مهما كانت z-index الخاصة به.

ما هو سياق التراكب؟

مجموعة من العناصر تتراكب معًا كطبقة واحدة. داخلها يُرتَّب الأبناء حسب z-index؛ وخارجها توضع المجموعة كلها حسب z-index للعنصر الذي أنشأها.

ما الذي ينشئ سياق تراكب؟

من بين أمور أخرى: العنصر الجذر، والعنصر المُموضَع بقيمة z-index غير auto، وposition: fixed أو sticky، وابن flex أو grid بقيمة z-index، وopacity أقل من 1، وtransform، وfilter، وisolation: isolate، وwill-change على تلك الخصائص.

هل تعمل z-index من دون position؟

ليس على العناصر الكتلية أو السطرية العادية: position: static تتجاهلها. لكنها تعمل على عناصر flex وgrid من دون أي position.

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