Di Chrome 22, perilaku tata letak elemen position:fixed sedikit berbeda dari versi sebelumnya. Semua elemen position:fixed kini membentuk konteks penumpukan baru. Ini akan mengubah susunan tumpukan beberapa halaman, yang berpotensi merusak tata letak halaman. Perilaku baru ini sesuai dengan perilaku browser WebKit di perangkat seluler (iOS Safari dan Chrome untuk Android).
Menumpuk Apa?
Semua orang mengetahui dan menyukai z-index untuk menentukan urutan kedalaman elemen di halaman. Namun, tidak semua indeks z dibuat sama, tetapi: z-index elemen hanya menentukan urutannya relatif terhadap elemen lain dalam konteks penumpukan yang sama. Sebagian besar elemen pada halaman berada dalam konteks penumpukan root tunggal, tetapi elemen yang diposisikan secara mutlak atau relatif dengan nilai z-index non-otomatis membentuk konteks penumpukan sendiri (artinya, semua turunannya akan diurutkan berdasarkan z dalam induk dan tidak disisipi dengan konten dari luar induk). Mulai Chrome 22, elemen position:fixed juga akan membuat konteks penumpukannya sendiri.
Untuk gambaran umum tentang penumpukan konteks, artikel MDN ini adalah bacaan yang bagus.
Bandingkan position:fixed dengan atribut position:sticky baru: untuk referensi, position:sticky akan selalu membuat konteks tumpukan baru.
Motivasi
Browser seluler (Mobile Safari, browser Android, browser berbasis Qt) menempatkan elemen position:fixed dalam konteks tumpukannya sendiri dan telah lama digunakan (sejak iOS5, Android Gingerbread, dll.) karena memungkinkan pengoptimalan scroll tertentu, membuat halaman web jauh lebih responsif saat disentuh. Perubahan ini diterapkan ke desktop karena tiga alasan:
- Memiliki perilaku rendering yang berbeda pada browser "seluler" dan "desktop" merupakan batu sandungan bagi penulis web; CSS akan berfungsi sama di mana saja jika memungkinkan.
- Dengan tablet, tidak jelas algoritma pembuatan konteks penumpukan "seluler" atau "desktop" mana yang lebih sesuai.
- Menghadirkan pengoptimalan performa scroll dari perangkat seluler ke desktop merupakan hal yang bagus bagi pengguna dan penulis.
Detail Perubahan
Berikut adalah contoh yang menunjukkan perilaku tata letak yang berbeda: https://codepen.io/paulirish/pen/CgAof
Dengan perubahan tersebut, kedua versi akan dirender seperti versi sebelah kanan.
Dalam contoh ini, kotak hijau memiliki z-index: 1, kotak merah muda memiliki z-index: 3, dan kotak oranye memiliki z-index: 2. Kotak biru adalah ancestor kotak oranye, dan memiliki position:fixed.
Jika kotak biru mendapatkan konteks penumpukannya sendiri, z-index kotak oranye akan dihitung relatif terhadap konteks penumpukan kotak biru. Karena kotak biru memiliki z-index dari auto, memberikannya tingkat tumpukan nol dalam konteks penumpukan root, ini berarti kotak oranye berakhir di belakang kotak hijau dan merah muda, yang memiliki indeks z 1 dan 3 (masing-masing) dalam konteks root.
Jika kotak biru tidak mendapatkan konteks penumpukannya sendiri, z-index kotak oranye akan dihitung relatif terhadap konteks tumpukan root (beserta kotak berwarna hijau dan merah muda). Oleh karena itu, kotak oranye berakhir disisipi dengan kotak merah muda dan hijau.
Untuk detail selengkapnya tentang kriteria penumpukan pembuatan konteks (dan bagaimana konteks penumpukan berperilaku secara umum), lihat lagi artikel MDN ini. Dalam contoh, versi sisi kanan selalu memberikan konteks tumpukannya sendiri ke kotak biru karena opasitasnya kurang dari 1. Perubahan perilaku yang dibuat secara efektif menambahkan kriteria lain untuk membuat konteks penumpukan yang terpisah, yaitu elemen yang position:fixed.
Pengujian & Masa Depan
Untuk menguji apakah halaman Anda akan berubah, buka about:flags Chrome dan aktifkan/nonaktifkan "elemen posisi tetap membuat konteks penumpukan". Jika tata letak Anda berfungsi sama di kedua kasus tersebut, berarti Anda sudah siap. Jika tidak, pastikan flag tersebut dapat Anda terima saat mengaktifkan tanda tersebut, karena ini akan menjadi setelan default di Chrome 22.
Perubahan ini menghapus satu kemampuan, yaitu kemampuan untuk menyisipkan konten dalam position:subtree tetap dengan konten non-scroll dari luar. Tidak mungkin developer web melakukan hal ini dengan sengaja, dan efek yang sama bisa dibuat dengan memberikan beberapa bagian DOM yang berbeda ke beberapa elemen position:fixed pada elemen-elemen yang berbeda. Sebagai contoh, pertimbangkan dua contoh berikut:
https://codepen.io/wiltzius/pen/gcjCk
Halaman ini mencoba mengambil dua div turunan (overlayA dan overlayB) dari posisi:elemen tetap dan menempatkan satu di atas div konten terpisah dan satu di bawah div konten terpisah yang sama tersebut. Sekarang tidak dapat dilakukan karena elemen position:fixed adalah konteks penumpukannya sendiri, dan (bersama dengan semua turunannya) akan sepenuhnya di atas atau sepenuhnya di bawah div konten. Perhatikan bahwa contoh ini tidak lagi berfungsi di Chrome 2.
Untuk memperbaikinya, kedua overlay tersebut dapat dipecah ke posisi masing-masing:elemen tetap. Masing-masing memiliki konteks penumpukan tersendiri, salah satunya dapat berada di atas div konten dan salah satunya dapat berada di bawah div konten. Lihat contoh tetap, yang berfungsi di Chrome 21 dan 22:
https://codepen.io/wiltzius/pen/vhFzG
Kredit untuk asal muasal contoh ini diberikan kepada hixie yang tak ada duanya.
Chrome adalah browser desktop pertama yang membuat elemen position:fixed untuk membuat konteks tumpukannya sendiri. Standar yang relevan adalah spesifikasi indeks z CSS (lihat misalnya https://www.w3.org/TR/CSS21/zindex.html). Belum ada konsensus mengenai apa yang harus dilakukan tentang perbedaan antara browser seluler dan desktop di sini, tetapi mengingat kebingungan memiliki dua perilaku berbeda di seluler dan desktop, Chrome telah memilih untuk beralih ke perilaku tunggal ini di kedua platform untuk saat ini.
Diperbarui 1 Okt 2012: Versi asli artikel ini menyarankan bahwa spesifikasi z-index CSS telah diubah untuk mencerminkan perilaku baru posisi: elemen tetap. Ini tidak akurat; telah dibahas di daftar gaya www, tetapi belum ada perubahan yang dimasukkan ke spesifikasi.