در کروم 22 رفتار چیدمان عناصر position:fixed کمی متفاوت از نسخه های قبلی است. همه عناصر position:fixed اکنون زمینه های انباشته جدیدی را تشکیل می دهند. این امر ترتیب انباشته شدن برخی از صفحات را تغییر می‌دهد، که پتانسیل شکستن طرح‌بندی صفحه را دارد. رفتار جدید با رفتار مرورگرهای WebKit در دستگاه های تلفن همراه (iOS Safari و Chrome for Android) مطابقت دارد.
چیده شدن
همه افراد z-index برای تعیین ترتیب عمق عناصر در یک صفحه می شناسند و دوست دارند. با این حال، همه شاخص‌های z یکسان ایجاد نمی‌شوند: z-index یک عنصر فقط ترتیب آن را نسبت به عناصر دیگر در زمینه انباشتگی یکسان تعیین می‌کند. اکثر عناصر در یک صفحه در یک زمینه انباشته ریشه قرار دارند، اما عناصر کاملاً یا نسبتاً در موقعیت با مقادیر غیرخودکار z-index ، زمینه‌های انباشته خود را تشکیل می‌دهند (یعنی همه فرزندان آنها به ترتیب Z در والد قرار می‌گیرند و با محتوای خارج از والد ترکیب نمی‌شوند). از Chrome 22، عناصر position:fixed نیز زمینه‌های انباشتگی خود را ایجاد می‌کنند.
برای یک مرور کلی از زمینه های انباشته، این مقاله MDN خواندنی عالی است.
position:fixed با موقعیت جدید: مشخصه چسبنده : برای مرجع، position:sticky همیشه یک زمینه انباشتگی جدید ایجاد می کند.
انگیزه
مرورگرهای تلفن همراه (Mobile Safari، مرورگر اندروید، مرورگرهای مبتنی بر 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 است. تغییر رفتاری که انجام می شود به طور موثر معیار دیگری را برای ایجاد یک زمینه انباشته جداگانه اضافه می کند، یعنی یک عنصر موقعیت: ثابت است.
تست و آینده
برای آزمایش اینکه آیا صفحه شما قرار است تغییر کند یا نه، به Chrome's about:flags بروید و "عناصر موقعیت ثابت ایجاد زمینه های انباشته" را روشن/خاموش کنید. اگر چیدمان شما در هر دو مورد یکسان رفتار می کند، شما آماده هستید. در غیر این صورت، مطمئن شوید که با فعال بودن آن پرچم برای شما قابل قبول به نظر می رسد، زیرا این پرچم پیش فرض در کروم 22 خواهد بود.
این تغییر یک قابلیت را حذف می‌کند - توانایی درهم‌آمیزی محتوا در یک موقعیت: درخت فرعی ثابت با محتوای غیر پیمایشی از خارج. بعید است که هیچ توسعه‌دهنده‌ای از عمد این کار را انجام دهد، و همین اثر را می‌توان با دادن موقعیت‌های متعدد: عناصر ثابت بخش‌های مختلف DOM ایجاد کرد. به عنوان نمونه به این دو مثال توجه کنید:
https://codepen.io/wiltzius/pen/gcjCk
این صفحه سعی می کند دو div فرزند (overlayA و overlayB) از یک عنصر position:fixed بگیرد و یکی را بالای یک محتوای جداگانه و دیگری را زیر همان div محتوای جداگانه قرار دهد. در حال حاضر انجام این کار غیرممکن است زیرا عنصر position:fixed زمینه انباشتگی خودش است و (همراه با همه فرزندانش) یا به طور کامل بالای یا کاملاً زیر قسمت محتوا قرار خواهد گرفت. توجه داشته باشید که این مثال در کروم 21 و قبل از آن کار می کند اما دیگر در کروم 22 کار نمی کند.
برای رفع این مشکل، دو پوشش را می توان به موقعیت خود تقسیم کرد: عناصر ثابت. هر کدام زمینه انباشته شدن خود را دارند که یکی از آنها می تواند بالاتر از قسمت محتوا و یکی از آنها می تواند زیر قسمت محتوا قرار گیرد. مثال ثابت را ببینید که در کروم 21 و 22 کار می کند:
https://codepen.io/wiltzius/pen/vhFzG
اعتبار پیدایش این مثال به هیکسی تکرار نشدنی است.
کروم اولین مرورگر دسکتاپ است که باعث می شود عناصر موقعیت: ثابت زمینه های انباشته خود را ایجاد کنند. استاندارد مربوطه مشخصات CSS z-index است (به عنوان مثال https://www.w3.org/TR/CSS21/zindex.html را ببینید). هنوز در مورد اینکه چه باید کرد در مورد تفاوت بین مرورگرهای موبایل و دسکتاپ در اینجا اتفاق نظر وجود ندارد، اما با توجه به سردرگمی وجود دو رفتار متفاوت در تلفن همراه و دسکتاپ، کروم فعلاً تصمیم گرفته است به این رفتار واحد روی هر دو پلتفرم حرکت کند.
به روز شده در 1 اکتبر 2012: نسخه اصلی این مقاله نشان می دهد که مشخصات z-index CSS قبلاً تغییر کرده است تا رفتار جدید موقعیت را منعکس کند: عناصر ثابت. این نادرست است. در لیست www-style بحث شده است اما هنوز هیچ تغییری در مشخصات انجام نشده است.