خاصية z-index: نظرة عامة مفصلة. تراكب السياقات أو عندما لا يعمل مؤشر z
خاصية z-index css ليست مثل أي خاصية css أخرى. العديد من المطورين، عندما واجهوا ذلك، كانوا في حيرة من أمرهم بسبب الاستخدام غير الصحيح. ومع ذلك، بمجرد أن تصبح أكثر دراية بـ z-index، ستدرك أن هذه الخاصية بسيطة جدًا وتوفر طريقة فعالة لحل العديد من مشكلات التخطيط.
لنبدأ تدوينتنا بمقدمة. تحدد الخاصية z-index مستوى المكدس لعنصر html. يشير "مستوى المكدس" إلى موضع العنصر على المحور Z، بشكل عمودي على المحور X والمحور Y. يقع العنصر الذي تم تعيين أعلى قيمة له في أعلى المكدس.
إذا لم يكن كل شيء واضحًا في البداية، فأعتقد أنه بعد عرض التمثيل ثلاثي الأبعاد لـ "مستوى المكدس" (المحور Z) سيصبح الأمر أكثر وضوحًا: 
يتم تحديد ترتيب المكدس الطبيعي، أو ترتيب العناصر على المحور Z، من خلال عدد من العوامل. فيما يلي قائمة توضح الترتيب الذي تم به تكديس العناصر، بدءًا من الأسفل:
- خلفية وحدود العنصر الذي ينشئ سياق المكدس
- العناصر ذات سياق المكدس السلبي، بترتيب المظهر
- عناصر كتلة غير موضعية وغير عائمة، حسب ترتيب ظهورها
- العناصر العائمة غير موضوعة حسب ترتيب ظهورها
- العناصر المضمنة، حسب ترتيب الظهور
- العناصر مرتبة حسب ظهورها
لا تحتوي هذه الكتل الثلاث على مؤشر z مخصص لها.
كل الأسرار أم لماذا هناك ارتباك؟
الهدف الأساسي من خاصية z-index هو تغيير ترتيب المكدس العادي، ولكن إذا تم استخدامه بشكل غير صحيح، فقد يكون مضللاً. يحدث هذا المفهوم الخاطئ لأن خاصية z-index ستعمل فقط على العناصر التي لها خاصية موضع بإحدى القيم الثلاث: ثابتة أو نسبية أو مطلقة.
الاستخدام
يمكن أن تؤثر خاصية z-index على ترتيب العناصر لكل من العناصر المضمنة والكتلة، ويتم تعيينها عن طريق تعيين قيمة عدد صحيح موجب أو سالب، أو القيمة auto. تمنح القيمة auto العنصر نفس ترتيب الطبقة مثل العنصر الأصلي.
#صندوق(
الموضع: نسبي؛ مؤشر z: 100؛
}
باستخدام مثال، سأوضح كيف يمكنك استخدام z-index لتغيير الترتيب المعتاد للعناصر بنفس الكتل كما في المثال الأول:
جميل وبسيط، ولكن في ظل ظروف معينة، في متصفحات مثل IE6 وFirefox 2، يمكن التعامل مع خاصية z-index بشكل مختلف.
IE6: أعط عنصر التحديد أولوية أكبر!
الحقيقة هي أن متصفحًا رائعًا مثل IE6 لا يريد عرض العنصر بأي شكل من الأشكال
باستخدام آي فريم:
حظر النص
باستخدام جافا سكريبت:
لن أعرض عليك مثالا، لأن التنفيذ بسيط وفعال للغاية. يمكنك فقط إخفاء العنصر
فايرفوكس 2: ما هي القيمة السلبية؟ هاه؟
هذا كل شيء. وفايرفوكس 2 له أيضًا عيوبه. على الرغم من إزالته من دعم المطورين، ما زلت أذكرك أن forfox 2 لا يعمل مع قيم مؤشر z السالبة ولا يمكن فعل أي شيء حيال ذلك.
ها أنت ذا. تبدو خاصية z-index المخيفة وغير المعروفة في CSS بسيطة جدًا. آمل أنني لم يفوتني أي شيء. إذا كنت تعرف أي مشاكل أخرى تتعلق بـ z-index، فنحن نرحب بك للتعليق، لأنني لم أواجه أي مشكلات أخرى في ممارستي.
مستوحاه.
المشكلة في z-index هي أن العديد من الأشخاص ببساطة لا يفهمون كيفية عمله.
كل ما هو موضح أدناه موجود في مواصفات W3C. لسوء الحظ، ليس الجميع يقرأها.
وصف المشكلة:
لنفترض أن لدينا كود HTML يتكون من 3 عناصر.كل واحد منهم يحتوي على واحد في حد ذاته. ولكل منها خلفيتها الخاصة: الأحمر والأخضر والأزرق على التوالي. بالإضافة إلى ذلك، يتم وضع كل واحدة تمامًا في الحافة العلوية اليسرى من المستند بطريقة تتداخل قليلاً مع تلك المجاورة لها. الأول يحتوي على مؤشر z يساوي 1، بينما لا يحتوي الاثنان الآخران على مجموعة مؤشر z.
يوجد أدناه كود HTML مع تصميم CSS الأساسي.
.أحمر، .أخضر، .أزرق (الموضع: مطلق؛ ) .أحمر (خلفية: أحمر؛ مؤشر z: 1؛) .أخضر (خلفية: أخضر؛) .أزرق (خلفية: أزرق؛)
مثال على jsfiddle
مهمة:التأكد من وجود اللون الأحمر خلف الأزرق والأخضر، دون الإخلال بأي من القواعد التالية:
- لا يمكنك تغيير ترميز HTML
- لا يمكنك تغيير/إضافة فهرس z إلى العناصر
- لا يمكنك تغيير/إضافة موضع إلى العناصر
حل:
الحل هو إضافة أقل من شفافية واحدة إلى الشفافية الأولى (أصل اللون الأحمر).وإليك ملف CSS الذي يوضح ذلك:
div:الطفل الأول (التعتيم: .99;)
حسنًا، هناك خطأ ما هنا. ما علاقة الشفافية بالموضوع؟ كيف يمكن أن تؤثر على ترتيب العناصر المتداخلة؟ هل تعتقد نفس الشيء؟ مرحبا في النادي!
آمل أن يكون كل شيء في الجزء الثاني من المقال في مكانه الصحيح.
ترتيب عناصر التراكب:
يبدو مؤشر Z بسيطًا جدًا: كلما ارتفعت القيمة، كلما كان العنصر أقرب إلينا، أي. العنصر ذو الفهرس z 5 سيتداخل مع العنصر ذو الفهرس z 2، أليس كذلك؟ ليس حقيقيًا.هذه هي مشكلة مؤشر z. يبدو الأمر واضحًا جدًا لدرجة أن معظم المطورين لا يقضون وقتًا كافيًا في دراسة هذه المشكلة.
يمكن لأي عنصر في مستند HTML أن يكون في المقدمة أو في الخلفية. الجميع يعرف هذا. القواعد التي تحدد هذا الترتيب موصوفة بوضوح في المواصفات، ولكن كما قلت أعلاه، لا يفهمها الجميع بشكل كامل.
إذا لم يتم تعيين مؤشر z وخصائص تحديد الموقع بشكل صريح، فسيكون كل شيء بسيطًا: ترتيب التراص يساوي ترتيب العناصر في HTML. (الأمر في الواقع أكثر تعقيدًا من ذلك بقليل، ولكن طالما أنك لا تستخدم قيم الحشو السالبة لتداخل العناصر المضمنة، فلن تواجه حالات حافة)
إذا قمت بتحديد موضع العناصر (وتوابعها) بشكل صريح، فستتداخل هذه العناصر مع العناصر دون خاصية تحديد موضع واضحة. (عندما أقول "حدد الموضع بشكل صريح"، أعني أي قيمة غير القيمة الثابتة، على سبيل المثال: مطلقة أو نسبية).
وأخيرًا، الحالة التي يتم فيها إعطاء مؤشر z. في البداية، من الطبيعي أن نفترض أن العناصر ذات فهرس z الكبير ستكون فوق العناصر ذات فهرس z الأصغر، وأي عنصر ذو مجموعة فهرس z سيكون أعلى عنصر بدون مجموعة فهرس z، ولكن هذا ليست الحالة. أولاً، يؤخذ مؤشر z في الاعتبار فقط على العناصر الموضوعة بشكل واضح. إذا حاولت تعيين مؤشر z على عنصر غير محدد الموضع، فلن يحدث شيء. ثانيًا، يمكن لقيم z-index إنشاء سياقات تراكب. حسنًا، أصبحت الأمور أكثر تعقيدًا، أليس كذلك؟
تراكب السياق
تُعرف العناصر ذات الأصول المشتركة التي تنتقل إلى المقدمة أو الخلفية معًا باسم سياق التراكب. يعد فهم سياق التراص أمرًا أساسيًا لفهم مؤشر z وترتيب تكديس العناصر.يحتوي كل سياق تراكب على عنصر جذر خاص به في بنية HTML. في اللحظة التي يتم فيها تشكيل سياق جديد على عنصر ما، تقع جميع العناصر الفرعية أيضًا في هذا السياق وتأخذ مكانها في ترتيب التراكب. إذا تم وضع عنصر ما في أسفل سياق تراكب واحد، فلا توجد طريقة يمكن من خلالها عرضه فوق عنصر آخر في سياق تراكب مجاور أعلى التسلسل الهرمي، حتى مع تعيين مؤشر z على مليون.
ويمكن تشكيل سياق جديد في الحالات التالية:
- إذا كان العنصر هو العنصر الجذر للمستند (العنصر)
إذا لم يتم وضع العنصر بشكل ثابت وقيمة الفهرس z الخاصة به ليست تلقائية
إذا كان العنصر لديه عتامة أقل من 1
هذه ليست الصفحة الأولى التي أكتبها، ولكن هذه هي المرة الأولى التي أواجه فيها مشكلة مماثلة. في أحد التصاميم كنت بحاجة إلى إعادة قائمة الكتالوج. في البداية، تم استخدام قائمة ذات مستوى واحد، لكن أعمال العميل نمت وكانوا بحاجة إلى تنفيذ قائمة منسدلة نموذجية متعددة المستويات. "لا مشكلة!" - فكرت وبدأت بسرعة في رسم أنماط إضافية باستخدام العلامات. لم يستغرق الأمر الكثير من الوقت، لكن الاختبار الأول لم ينجح. ظهرت مستويات القائمة على النحو المنشود، ولكن لسبب ما كانت متداخلة مع عناصر من الجزء المركزي من الصفحة.
"ها!" - تومض من خلال رأسي. من المحتمل أن أحد الأنماط يفتقد خاصية "z-index"، والتي تسمح لك بالتحكم في ترتيب تراص العناصر الموضوعة على الصفحة. لقد بدأت بإضافة "z-index" ولم يحدث أي شيء جيد. بغض النظر عن القيمة التي قمت بتعيينها لها، فإن العناصر من الجزء المركزي من الصفحة لا تزال متداخلة مع قائمتي.
مؤشر z غامض
يبدو أن ما الذي يمكن أن يكون صعبًا مع مؤشر z؟ نعلم جميعًا أن العناصر الموضوعة على الصفحة يمكن أن تتداخل مع بعضها البعض. تتيح لك خاصية "z-index" التحكم في ترتيب التراكب. على سبيل المثال، إذا كان لدينا عنصرين لهما قيمة معينة مؤشر z- 5 و 10، ثم سيتم وضع الأخير في المقدمة، لأنه وعشرة أكثر من خمسة، وأكثر يعني أقرب. عندما لا يتم تعيين خاصية z-index، يتم تحديد ترتيب التراص حسب ترتيب العناصر الموجودة في المستند.
لا يبدو أن هناك أي صعوبات حتى تبدأ بالحفر بشكل أعمق. تبدأ الصعوبات الأولى بظهور ما يسمى بسياقات التراكب. يشير سياق المزج إلى العناصر ذات الأصول المشتركة التي تتحرك معًا إلى المقدمة أو الخلفية.
يحتوي سياق التراكب على عنصر جذر. على سبيل المثال، لدينا بعض
والتي نحدد سياق التراكب لها. ولذلك، فإن جميع توابعها ستقع أيضًا في نفس سياق التراكب.
هنا يبدا المرح. لا تتداخل سياقات التراكب. بعد وضع عنصر ما في أسفل سياق واحد، لن يكون من الممكن رفعه فوق عنصر السياق المجاور. إن تغيير قيمة مؤشر z حتى بالأرقام الأكثر روعة لن يؤدي إلى التأثير المتوقع.
عندما يتم تشكيل سياق تراكب جديد
تحدد المواصفات عدة شروط لتشكيل سياق التراكب:
وبالنظر إلى المستقبل، سأقول أنه لحل مشكلتي كان من الضروري فقط إضافة الشفافية ( العتامة) لعنصر القائمة الجذرية وعمل كل شيء على النحو المنشود على الفور.
كيف يتم عرض العناصر في نفس سياق التراكب
لدمج كل ما سبق بشكل أفضل، دعونا نتذكر مرة واحدة وإلى الأبد الترتيب الذي يتم به عرض العناصر في سياق تراكب واحد (من البعيد إلى القريب).
من المؤلف:سنتحدث اليوم عن كيفية عمل خاصية z Index CSS. هذه هي المقالة الثالثة في سلسلة How CSS Works، حيث نتعمق في اللبنات الأساسية لـ CSS التي تبدو أحيانًا وكأنها سحر أسود. بغض النظر عن كيفية كتابتك لـ CSS، من الجيد دائمًا معرفة أن وقت تشغيل ورقة الأنماط الخاصة بك يسمح لك بكتابة CSS فعالة وقابلة للتطوير.
اليوم سوف نتعمق في واحدة من تلك الأجزاء من السحر الأسود لـ CSS. عند اللعب باستخدام مؤشر z، غالبًا ما نرمي قيمًا أعلى وأعلى ونرى أي منها يعمل. ولكن ماذا لو قمنا بقشر طبقات الفهرس z ونظرنا إلى القواعد التي تحددها؟ سنرى أن الأمر ليس مخيفًا كما كنا نظن.
ما هو مؤشر Z؟
ففي نهاية المطاف، الشاشات التي نستخدمها في المتصفح هي عبارة عن أسطح مسطحة ثنائية الأبعاد تحتوي على مجموعة من وحدات البكسل. ولكن إذا كنت تستخدم الإنترنت لفترة طويلة، فمن المحتمل أنك مررت في كثير من الأحيان بتجارب "ثلاثية الأبعاد". على سبيل المثال، يمكنك النقر فوق زر وفتح نافذة مشروطة أو عرض تلميح أداة "أعلى" أزراره.
إذا افترضت أن المستخدم ينظر "إلى الشاشة" ويتخيل أن الشاشة هي بوابة إلى عالم ثلاثي الأبعاد، فيمكنك البدء في تصور كيف تبدو تلك المساحة ثلاثية الأبعاد في المتصفح. في البداية، إذا أردنا تصور هذه المساحة كغرفة، فإن "الجدار" "الأبعد" يسمى "اللوحة القماشية".
عند رسم وحدات البكسل على الشاشة، يضمن المتصفح أن يتم رسم وحدات البكسل الأقرب إلى اللوحة القماشية (أو الأبعد عنا) أولاً. ثم يستمر تدريجيًا في رسم العناصر "أقرب" إلى المستخدم، مع الكتابة فوق وحدات البكسل التي تم رسمها مسبقًا.
تشير خاصية z-index إلى ترتيب تلوين العنصر في وهم المتصفح ثلاثي الأبعاد هذا. افتراضيًا، تحتوي جميع العناصر على مؤشر z بقيمة 0 ويكون المتصفح بترتيب DOM. ومع ذلك، فإن مؤشر z يمنحنا في الواقع تحكمًا دقيقًا عند تلوين عنصر ما. من خلال تعيين مؤشر z أعلى، يمكننا فرض تلوين العنصر بطريقة تجعله "أقرب" إلى المستخدم. يتيح لنا مؤشر z المنخفض (أو السلبي!) تقريب العنصر من اللوحة القماشية.
أثناء البحث في مواصفات موضع وتخطيط CSS، وجدت هذا الرسم التخطيطي المفيد لتصور كيف تبدو طبقات الفهرس z للمستخدم.
تظهر العناصر ذات مؤشر z الأعلى "أقرب" للمستخدم
إذا نظرنا إلى سلوك مؤشر z هذا، فقد نعتقد أنه مباشر بنسبة 100%: مؤشر z الأعلى يكون أقرب إلى المستخدم، ومؤشر z الأقل بعيدًا. ومع ذلك، هناك بعض الفروق الدقيقة في مؤشر z التي تسبب الكثير من الارتباك.
التحذير الأول مع مؤشر z هو أن الخاصية يجب أن تكون على العنصر الموضوع حتى تصبح نافذة المفعول. هذا يعني أنه لا يمكن استخدام مؤشر z لتغيير ترتيب التراص إلا إذا قمت بتعيين الموضع على شيء آخر غير ثابت. في أي موقف لم تحدد فيه موضعًا لعنصر ما، لن يكون لـ z-index أي تأثير.
عرض سياق المكدس
تصبح مشكلة z-index أكثر قتامة عندما نأخذ في الاعتبار التحذير الثاني لـ z-index: تنطبق الخاصية فقط على العناصر الموجودة في سياق المكدس.
يتضمن سياق المكدس عقدة HTML وجميع أبنائها. يمكن تسمية عنصر HTML الموجود على مستوى الجذر لسياق المكدس بجذر المكدس.
يحتوي سياق المكدس الافتراضي (أو "سياق جذر المكدس") للمستند على علامة html باعتبارها "جذر المكدس" وجميع العناصر تنتمي إلى سياق المكدس الافتراضي هذا. ومع ذلك، يمكن لأي عقدة HTML أيضًا أن تكون العنصر الجذر لـ "سياق المكدس المحلي".
فيما يلي بعض الطرق التي يمكنك من خلالها تعيين عنصر كجذر لسياق المكدس المحلي الجديد:
الموضع: مطلق أو الموضع: نسبي مع أي فهرس z بخلاف تلقائي للعنصر.
استخدام الموضع: ثابت أو الموضع: مثبت على عنصر.
ضبط العتامة على أقل من 1 على العنصر.
استخدام التحويل أو الإرادة للتغيير على عنصر.
على سبيل المثال، دعونا نتخيل ثلاث أشجار من عقد HTML، والتي تم تصورها على أنها ثلاث مكدسات. في الرسم البياني أدناه، الجزء السفلي من كل مكدس هو عقدة HTML الأصلية، مع تكديس العناصر الفرعية في الأعلى (مثل عرض مقلوب لشجرة HTML). لنفترض أيضًا أن كل عنصر من هذه العناصر هو فرع مباشر لعلامة الجسم.
ثلاث مجموعات من العناصر، العناصر الأصلية موجودة في الأسفل
إذا أردنا عرض عناصر HTML هذه في المتصفح، فستبدو كما يلي:
لاحظت أي شيء غريب مع الطبقات؟
لاحظت أي شيء مثير للاهتمام؟
أولاً، لماذا يعتبر الطفل الأزرق-2 أقل من أي شيء آخر؟ يحتوي على مؤشر z بقيمة مليون، لذا يجب أن يكون في الأعلى، أليس كذلك؟
وأيضًا، لماذا يظهر green-child-1 فوق كل شيء على الرغم من أنه يحتوي على مؤشر z يساوي 2؟ ألم نقل أن درجات Z الأعلى "تفوز" على درجات Z الأقل؟
لنبدأ مع الطفل الأخضر -1. نظرًا لأن العنصر الأصلي، الأخضر الأصل، يحتوي على مؤشر z يبلغ 999، فإننا نتوقع أن يكون الأصل الأخضر أعلى من أي شيء آخر أيضًا. لكن تذكر تحذيرنا الأول حول استخدام مؤشر z، فإن هذا لن يؤثر على العناصر ذات الموضع الثابت. هذا يعني أن Green-child-1 هو جزء من سياق مكدس الجذر، ويتم قياسه مقابل الأصل الأحمر والأصل الأزرق، العنصرين الآخرين الوحيدين في الطبقة الجذرية للمكدس. يحتوي على مؤشر z أعلى من ذلك ويظهر في الأعلى.
إن فهم أن كل من الوالد الأحمر والوالد الأزرق ينشئان سياقات المكدس المحلية الخاصة بهما يساعد أيضًا في فهم سبب ظهور blue-child-2 أسفل الوالد الأحمر على الرغم من أن مؤشر z الخاص به أعلى بكثير. نظرًا لأن z-index يتحكم فقط في موضع العنصر في سياق المكدس المحلي، فمن المؤكد أن blue-child-2 سيكون فوق كل الأطفال ذوي الوالدين الأزرق. لكن الأصل الأحمر يحتوي على مؤشر z أعلى من الأصل الأزرق، وجميع العناصر الموجودة داخل الأصل الأحمر ستظهر أعلى من الأصل الأزرق بغض النظر عن مؤشر z الخاص بها.
لتقديم blue-child-2 فوق red-parent، سيتعين علينا في الواقع تغيير بنية HTML الخاصة بنا لإخراج blue-child-2 من سياق المكدس المحلي الحالي وفي سياق مكدس الجذر (أو على الأقل في سياق المكدس الذي هو أعلى الأحمر الوالد).
غالبًا ما يكون هذا النوع من الأشياء صعبًا (وحتى خطيرًا) في تطبيق أكبر، خاصة عندما تحاول إدارة أشياء مثل البنية الدلالية لـ HTML، وإمكانية الوصول، وبنيات المكونات المعيارية.
ستشاهد غالبًا الكثير من مكتبات المكونات التي تنفذ واجهة المستخدم ذات الطبقات الخاصة بها (مثل تلميحات الأدوات والنماذج) عن طريق إضافة عناصر إلى علامة النص بدلاً من المكان الذي تقوم فيه بتضمين المكون - ويتم ذلك إلى حد كبير للتغلب على مشكلة سياق المكدس. وهذا يضمن أن مؤشر z على المكونات التي تعتمد بشكل كبير على الطبقات يشير دائمًا إلى سياق المكدس الجذري، وبالتالي يمكنك ضبط مؤشر z على حوالي 1000 والاعتماد على العنصر ليظهر أعلى معظم العناصر.
خاتمة
يمكن أن يكون استخدام مؤشر z معقدًا في عدة سيناريوهات، ولكن بمجرد أن نعرف القواعد الخاصة بكيفية عمله داخليًا، نجد أنه يتصرف بشكل متوقع تمامًا. أعتقد أن 99% من الالتباس حول مؤشر z ينبع من سوء فهم للمشكلتين اللتين ناقشناهما.
دعونا نتذكر بسرعة هذين التحذيرين.
يعمل مؤشر z فقط على العناصر التي لها قيمة موضعية غير ثابتة.
ينطبق مؤشر z فقط على موضع العناصر في سياق المكدس الذي ينتمي إليه.
نأمل أن يمنحك فهم الأعمال الداخلية لـ z-index الثقة لإنشاء واجهات مستخدم متعددة الطبقات بمزالقها المختلفة. كان التعرف على مؤشر z وطبقات التراص مفيدًا جدًا بالنسبة لي في تنظيم أسلوبي في تصميم واجهة المستخدم - فمعرفة الرقم الذي سيتم تعيينه أفضل بكثير من مجرد طرح قيم مؤشر z.
