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