Chrome 22'de position:fixed öğelerinin düzen davranışı önceki sürümlerden biraz farklıdır. Tüm position:fixed öğeleri artık yeni yığın bağlamları oluşturuyor. Bu işlem, bazı sayfaların yığın sıralamasını değiştirir ve sayfa düzenlerinin bozulmasına neden olabilir. Yeni davranış, mobil cihazlardaki WebKit tarayıcıların (iOS Safari ve Android için Chrome) davranışıyla eşleşir.
Whats'ı birleştirme
Sayfadaki öğelerin derinlik sırasını belirlemek için kullanılan z-index'ü herkes bilir ve sever. Ancak tüm z-endeksleri aynı şekilde oluşturulmaz: Bir öğenin z-index değeri yalnızca aynı gruplandırma bağlamındaki diğer öğelere göre sıralamasını belirler. Sayfadaki öğelerin çoğu tek bir kök yığın bağlamındadır ancak otomatik olmayan z-index değerlerine sahip mutlak veya göreli olarak konumlandırılmış öğeler kendi yığın bağlamlarını oluşturur (yani, tüm alt öğeleri üst öğe içinde z sırasına göre yerleştirilir ve üst öğenin dışındaki içerikle ardışık olarak yerleştirilmez). Chrome 22'den itibaren position:fixed öğeleri de kendi yığın bağlamlarını oluşturacaktır.
Yığın bağlamlarına genel bir bakış için bu MDN makalesini inceleyebilirsiniz.
position:fixed özelliğini new position:sticky özelliğiyle karşılaştırın: Referans olarak, position:sticky her zaman yeni bir yığın bağlamı oluşturur.
Motivasyon
Mobil tarayıcılar (Mobil Safari, Android tarayıcı, Qt tabanlı tarayıcılar), belirli kaydırma optimizasyonlarına olanak tanıdığı ve web sayfalarını dokunmaya çok daha duyarlı hale getirdiği için position:fixed öğelerini kendi yığın bağlamlarına yerleştirir ve bir süredir (iOS5, Android Gingerbread vb. sürümlerden beri) bunu yapar. Bu değişiklik, masaüstü sürümünde üç nedenden dolayı uygulanmaktadır:
- "Mobil" ve "masaüstü" tarayıcılarda farklı oluşturma davranışına sahip olmak web yazarları için bir engeldir. Mümkün olduğunda CSS her yerde aynı şekilde çalışmalıdır.
- Tabletlerde, "mobil" veya "masaüstü" yığın bağlamı oluşturma algoritmalarından hangisinin daha uygun olduğu net değildir.
- Mobil cihazlardaki kaydırma performansı optimizasyonlarını masaüstüne getirmek hem kullanıcılar hem de yazarlar için iyi bir gelişmedir.
Değişiklikle ilgili ayrıntılar
Farklı düzen davranışlarını gösteren bir örneği burada bulabilirsiniz: https://codepen.io/paulirish/pen/CgAof
Değişiklik yapıldıktan sonra her iki sürüm de sağdaki sürüm gibi oluşturulur.
Bu örnekte yeşil kutuda z-index: 1, pembe kutuda z-index: 3 ve turuncu kutuda z-index: 2 simgesi vardır. Mavi kutu, turuncu kutunun atası olup position:fixed değerine sahiptir.
Mavi kutu kendi yığın bağlamını alırsa turuncu kutunun z-index değeri, mavi kutunun yığın bağlamına göre hesaplanır. Mavi kutunun z-index değeri auto olduğundan, kök yığın bağlamında sıfır yığın düzeyine sahip olur. Bu da turuncu kutunun, kök bağlamda sırasıyla 1 ve 3 z-dizini olan yeşil ve pembe kutuların arkasında yer aldığı anlamına gelir.
Mavi kutu kendi yığın bağlamını almıyorsa turuncu kutunun z-index değeri, yeşil ve pembe kutularla birlikte kök yığın bağlamına göre hesaplanır. Bu nedenle, turuncu kutu pembe ve yeşil kutularla iç içe yerleştirilir.
Yığın bağlamı oluşturma ölçütleri (ve yığın bağlamlarının genel olarak nasıl davrandığı) hakkında daha fazla bilgi için yine bu MDN makalesine bakın. Örnekte, sağ taraftaki sürümde opaklığı 1'den az olduğu için mavi kutuya her zaman kendi yığın bağlamı verilmiştir. Yapılan davranış değişikliği, ayrı bir yığın bağlamı oluşturmak için etkili bir şekilde başka bir ölçüt ekler. Bu ölçüt, bir öğenin position:fixed olmasıdır.
Testler ve Gelecek
Sayfanızın değişip değişmeyeceğini test etmek için Chrome'un about:flags bölümüne gidin ve "sabit konumlu öğeler yığın bağlamları oluşturur" seçeneğini etkinleştirin/devre dışı bırakın. Düzeniniz her iki durumda da aynı şekilde çalışıyorsa sorun yoktur. Aksi takdirde, Chrome 22'de varsayılan olarak bu işaret etkin olacağından, bu işaret etkinken sizin için kabul edilebilir olduğundan emin olun.
Bu değişiklikle birlikte, position:fixed alt ağacındaki içeriğin dışarıdan gelen kaydırmayan içerikle iç içe yerleştirilmesi özelliği kaldırıldı. Web geliştiricilerin bunu kasıtlı olarak yapması pek olası değildir. Aynı etki, DOM'un farklı bölümlerine birden fazla position:fixed öğesi verilerek de oluşturulabilir. Örneğin, aşağıdaki iki örneği inceleyin:
https://codepen.io/wiltzius/pen/gcjCk
Bu sayfada, position:fixed öğesinin iki alt div'ini (overlayA ve overlayB) alıp birini ayrı bir içerik div'inin üstüne, diğerini de aynı ayrı içerik div'inin altına yerleştirmeye çalışılmaktadır. position:fixed öğesi kendi yığın bağlamına sahip olduğundan ve (tüm alt öğeleriyle birlikte) tamamen içerik div'inin üstünde veya altında olacağından artık bunu yapmak mümkün değildir. Bu örneğin Chrome 21 ve önceki sürümlerde çalıştığını ancak Chrome 22'de artık çalışmadığını unutmayın.
Bu sorunu düzeltmek için iki yer paylaşımı kendi konumlarına ayrılabilir:sabit öğeler. Her biri kendi yığın bağlamına sahiptir. Bunlardan biri içerik div'inin üstüne, diğeri ise içeriğin altına yerleştirilebilir. Chrome 21 ve 22'de çalışan düzeltilmiş örneği inceleyin:
https://codepen.io/wiltzius/pen/vhFzG
Bu örneğin ortaya çıkmasında benzersiz hixie'nin payı büyüktür.
Chrome, position:fixed öğelerinin kendi yığın bağlamlarını oluşturmasına neden olan ilk masaüstü tarayıcıdır. İlgili standart, CSS z-dizin spesifikasyonudur (ör. https://www.w3.org/TR/CSS21/zindex.html adresine bakın). Mobil ve masaüstü tarayıcılar arasındaki fark konusunda henüz bir fikir birliğine varılmadı ancak mobil ve masaüstünde iki farklı davranışın neden olduğu karışıklık göz önüne alındığında Chrome, şimdilik her iki platformda da bu tek davranışa geçmeyi tercih etti.
1 Ekim 2012'de güncellendi: Bu makalenin orijinal sürümünde, CSS z-index spesifikasyonunun, position: fixed öğelerinin yeni davranışını yansıtacak şekilde değiştirildiği belirtiliyordu. Bu doğru değil. www-style listesinde tartışılmış olsa da henüz spesifikasyonda herhangi bir değişiklik yapılmadı.