في الإصدار 22 من Chrome، يختلف سلوك تنسيق عناصر position:fixed قليلاً عن الإصدارات السابقة. تشكل الآن جميع عناصر position:fixed سياقات جديدة للتكديس. سيؤدي ذلك إلى تغيير ترتيب تجميع بعض الصفحات، ما قد يؤدي إلى تعطُّل تنسيقات الصفحات. يتطابق السلوك الجديد مع سلوك متصفّحات WebKit على الأجهزة الجوّالة (Safari وChrome لنظام التشغيل iOS وAndroid).
ما هي العناصر التي يمكن تجميعها؟
يُعرف الجميع z-index ويحبّونه لتحديد ترتيب العناصر في الصفحة حسب العمق. ومع ذلك، لا يتم إنشاء جميع الفهارس z على قدم المساواة: لا يحدّد z-index للعنصر سوى ترتيبه بالنسبة إلى العناصر الأخرى في سياق التجميع نفسه. تكون معظم العناصر على الصفحة في سياق تجميع جذر واحد، ولكن العناصر ذات المواضع المطلقة أو النسبية التي لها قيم z-index غير تلقائية تشكل سياقات تجميع خاصة بها (أي أنّ جميع عناصرها الفرعية سيتم ترتيبها حسب المحور z ضمن العنصر الرئيسي ولن يتم تداخلها مع محتوى من خارج العنصر الرئيسي). اعتبارًا من الإصدار 22 من Chrome، ستنشئ عناصر position:fixed أيضًا سياقات التراص الخاصة بها.
للحصول على نظرة عامة على سياقات التراص، ننصحك بقراءة هذه المقالة على MDN.
قارِن position:fixed بسمة new position:sticky: يُرجى العِلم أنّ position:sticky تُنشئ دائمًا سياقًا جديدًا للتكديس.
الحافز
تضع متصفّحات الأجهزة الجوّالة (Mobile Safari ومتصفّح Android والمتصفحات المستندة إلى Qt) عناصر position:fixed في سياقات التراص الخاصة بها، وقد تم ذلك لبعض الوقت (منذ iOS5 وAndroid Gingerbread وما إلى ذلك) لأنّ ذلك يسمح بتحسينات معيّنة في الانتقال للأعلى أو للأسفل، ما يجعل صفحات الويب أكثر استجابةً للمس. يتم إجراء هذا التغيير على أجهزة الكمبيوتر المكتبي لثلاثة أسباب:
- يشكّل الاختلاف في سلوك العرض على متصفّحات "الأجهزة الجوّالة" و "أجهزة الكمبيوتر المكتبي" عائقًا أمام مؤلفي الويب، إذ يجب أن تعمل لغة CSS بالطريقة نفسها في كل مكان إن أمكن.
- في ما يتعلّق بالأجهزة اللوحية، ليس من الواضح أيّ من خوارزميات إنشاء سياق التجميع "للأجهزة الجوّالة" أو "أجهزة الكمبيوتر المكتبي" هي الأنسب.
- إنّ توفير تحسينات أداء الانتقال للأعلى أو للأسفل من الأجهزة الجوّالة إلى أجهزة الكمبيوتر المكتبي يعود بالفائدة على كلّ من المستخدمين والمؤلفين.
تفاصيل التغيير
في ما يلي مثال يعرض سلوكيات التنسيق المختلفة: https://codepen.io/paulirish/pen/CgAof
بعد إجراء التغيير، سيتم عرض كلا الإصدارَين مثل الإصدار الأيمن.
في هذا المثال، يحتوي المربّع الأخضر على z-index: 1، ويحتوي المربّع الوردي على z-index: 3، ويحتوي المربّع البرتقالي على z-index: 2. المربّع الأزرق هو سلف المربّع البرتقالي، ويحتوي على position:fixed.
إذا حصل المربّع الأزرق على سياق تجميع خاص به، يتم احتساب z-index للمربّع البرتقالي بالنسبة إلى سياق تجميع المربّع الأزرق. بما أنّ المربّع الأزرق يحتوي على z-indexauto، ما يمنحه مستوى تجميع صفريًا في سياق التجميع الجذر، يعني ذلك أنّ المربّع البرتقالي ينتهي خلف المربّعَين الأخضر والوردي، اللذَين لديهما فهرس z1 و3 (على التوالي) في سياق الجذر.
إذا لم يحصل المربّع الأزرق على سياق تجميع خاص به، يتم احتساب z-index للمربّع البرتقالي بالنسبة إلى سياق التجميع الجذر (بالإضافة إلى المربّعَين الأخضر والوردي). وبالتالي، ينتهي الأمر بتداخل المربّع البرتقالي مع المربّعَين الوردي والأخضر.
لمزيد من التفاصيل حول معايير إنشاء سياقات التراص (وطريقة سلوك سياقات التراص بشكل عام)، يُرجى الرجوع مرة أخرى إلى مقالة MDN هذه. في المثال، يمنح الإصدار على الجانب الأيمن دائمًا المربّع الأزرق سياق التراص الخاص به لأنّ مستوى الشفافية أقل من 1. يضيف تغيير السلوك الذي يتم إجراؤه معيارًا آخر لإنشاء سياق تجميع منفصل، وهو عنصر position:fixed.
الاختبار والمستقبل
لاختبار ما إذا كانت صفحتك ستتغيّر، انتقِل إلى about:flags في Chrome وفعِّل أو أوقِف خيار "عناصر المواضع الثابتة تُنشئ سياقات تجميع". إذا كان التنسيق يعمل بالطريقة نفسها في كلتا الحالتَين، يعني ذلك أنّه تم حلّ المشكلة. إذا لم يكن الأمر كذلك، تأكَّد من أنّه يبدو مقبولًا لك عند تفعيل هذه الميزة التجريبية، لأنّها ستكون الإعداد التلقائي في الإصدار 22 من Chrome.
يزيل هذا التغيير قدرة واحدة، وهي إمكانية تداخل المحتوى ضمن شجرة فرعية position:fixed مع محتوى لا يمكن التمرير فيه من الخارج. من غير المرجّح أن يفعل أيّ من مطوّري الويب ذلك عن قصد، ويمكن إنشاء التأثير نفسه من خلال منح عناصر position:fixed متعددة الأجزاء المختلفة من DOM. على سبيل المثال، فكِّر في المثالَين التاليَين:
https://codepen.io/wiltzius/pen/gcjCk
تحاول هذه الصفحة استخدام divs فرعيَين (overlayA وoverlayB) من عنصر position:fixed ووضع أحدهما فوق div محتوى منفصل والآخر تحت div المحتوى المنفصل نفسه. من المستحيل الآن إجراء ذلك لأنّ عنصر position:fixed هو سياق التراص الخاص به، وسيكون (مع جميع عناصره الفرعية) إما فوق div المحتوى بالكامل أو تحته بالكامل. يُرجى العِلم أنّ هذا المثال يعمل في الإصدار 21 من Chrome والإصدارات الأقدم، ولكن لم يعُد يعمل في الإصدار 22.
لحلّ هذه المشكلة، يمكن تقسيم العنصرَين المتراكبين إلى عناصر position:fixed. وكلّ قسم منهما هو سياق تجميع خاص به، ويمكن أن يظهر أحدهما أعلى قسم المحتوى والآخر تحته. اطّلِع على المثال الذي تم إصلاحه والذي يعمل في الإصدارَين 21 و22 من Chrome:
https://codepen.io/wiltzius/pen/vhFzG
يعود الفضل في إنشاء هذا المثال إلى المبدعة hixie.
Chrome هو أول متصفّح للكمبيوتر المكتبي يتسبب في أن تنشئ عناصر position:fixed سياقات التراص الخاصة بها. المعيار ذي الصلة هو مواصفات مقياس z-index في CSS (راجِع على سبيل المثال https://www.w3.org/TR/CSS21/zindex.html). لم يتمّ بعد الاتفاق على الإجراء الذي يجب اتّخاذه بشأن الاختلاف بين متصفّحات الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي، ولكن نظرًا للارتباك الناتج عن توفّر سلوكَين مختلفَين على الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي، اختار Chrome الانتقال إلى هذا السلوك الفردي على كلتا المنصّتَين في الوقت الحالي.
تم تعديل هذه المقالة في 1 تشرين الأول (أكتوبر) 2012: اقترحت النسخة الأصلية من هذه المقالة أنّه سبق أن تم تغيير مواصفات CSS z-index لتعكس السلوك الجديد للعناصر التي لها موضع ثابت. هذا غير دقيق، فقد تمت مناقشته في قائمة www-style، ولكن لم يتم إجراء أي تغيير في المواصفات حتى الآن.