Di Chrome 22, perilaku tata letak elemen position:fixed sedikit berbeda dengan versi sebelumnya. Semua elemen position:fixed kini membentuk konteks penumpukan baru. Hal ini akan mengubah urutan penumpukan beberapa halaman, yang berpotensi merusak tata letak halaman. Perilaku baru ini cocok dengan perilaku browser WebKit di perangkat seluler (Safari iOS dan Chrome untuk Android).
Apa yang Ditumpuk?
Semua orang tahu dan menyukai z-index untuk menentukan urutan kedalaman elemen di halaman. Namun, tidak semua indeks z dibuat sama: z-index elemen hanya menentukan pengurutannya relatif terhadap elemen lain dalam konteks penumpukan yang sama. Sebagian besar elemen di halaman berada dalam satu konteks penumpukan root, tetapi elemen yang diposisikan secara absolut atau relatif dengan nilai z-index non-otomatis membentuk konteks penumpukan mereka sendiri (yaitu, semua turunannya akan diurutkan z dalam induk dan tidak akan diselingi dengan konten dari luar induk). Mulai Chrome 22, elemen position:fixed juga akan membuat konteks penumpukan sendiri.
Untuk ringkasan umum tentang konteks penumpukan, artikel MDN ini adalah bacaan yang bagus.
Bandingkan position:fixed dengan atribut position:sticky baru: sebagai referensi, position:sticky selalu membuat konteks penumpukan baru.
Motivasi
Browser seluler (Mobile Safari, browser Android, browser berbasis Qt) menempatkan elemen position:fixed dalam konteks penumpukan mereka sendiri dan telah melakukannya selama beberapa waktu (sejak iOS5, Android Gingerbread, dll.) karena memungkinkan pengoptimalan scroll tertentu, sehingga halaman web jauh lebih responsif terhadap sentuhan. Perubahan ini diterapkan di desktop karena tiga alasan:
- Memiliki perilaku rendering yang berbeda di browser "seluler" dan "desktop" adalah batu sandungan bagi penulis web; CSS harus 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 baik bagi pengguna maupun penulis.
Detail Perubahan
Berikut adalah contoh yang menunjukkan berbagai perilaku tata letak: https://codepen.io/paulirish/pen/CgAof
Dengan perubahan ini, 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 dari kotak oranye, dan memiliki position:fixed.
Jika kotak biru mendapatkan konteks penumpukan sendiri, z-index kotak oranye dihitung relatif terhadap konteks penumpukan kotak biru. Karena kotak biru memiliki z-index auto, yang memberinya tingkat penumpukan 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 penumpukan sendiri, z-index kotak oranye dihitung relatif terhadap konteks penumpukan root (beserta kotak hijau dan merah muda). Oleh karena itu, kotak oranye akhirnya diselingi dengan kotak merah muda dan hijau.
Untuk mengetahui detail selengkapnya tentang kriteria pembuatan konteks penumpuk (dan perilaku konteks penumpuk secara umum), lihat kembali artikel MDN ini. Dalam contoh, versi sebelah kanan selalu memberi kotak biru konteks penumpukan sendiri karena opasitas kotak tersebut kurang dari 1. Perubahan perilaku yang dilakukan secara efektif menambahkan kriteria lain untuk membuat konteks penumpukan terpisah, yaitu elemen yang memiliki posisi: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 berperilaku sama dalam kedua kasus tersebut, Anda sudah siap. Jika tidak, pastikan tampilannya dapat diterima dengan flag tersebut diaktifkan, karena flag tersebut akan menjadi default di Chrome 22.
Perubahan ini menghapus satu kemampuan - kemampuan untuk menyisipkan konten dalam subtree position:fixed dengan konten yang tidak di-scroll dari luar. Kemungkinan besar developer web tidak melakukannya dengan sengaja, dan efek yang sama dapat dibuat dengan memberikan beberapa elemen position:fixed ke bagian DOM 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 elemen position:fixed dan menempatkan satu di atas div konten terpisah dan satu di bawah div konten terpisah yang sama. Sekarang tidak mungkin untuk melakukannya karena elemen position:fixed adalah konteks penumpukan sendiri, dan elemen tersebut (beserta semua turunannya) akan sepenuhnya berada di atas atau sepenuhnya di bawah div konten. Perhatikan bahwa contoh ini berfungsi di Chrome 21 dan yang lebih lama, tetapi tidak lagi di Chrome 22.
Untuk memperbaikinya, kedua overlay dapat dibagi menjadi elemen position:fixed-nya sendiri. Masing-masing adalah konteks penumpukan sendiri, salah satunya dapat berada di atas div konten dan salah satunya dapat berada di bawah div konten. Lihat contoh yang diperbaiki, yang berfungsi di Chrome 21 dan 22:
https://codepen.io/wiltzius/pen/vhFzG
Kredit untuk asal-usul contoh ini diberikan kepada hixie yang tak dapat ditiru.
Chrome adalah browser desktop pertama yang menyebabkan elemen position:fixed membuat konteks penumpukan sendiri. Standar yang relevan adalah spesifikasi indeks z CSS (lihat misalnya https://www.w3.org/TR/CSS21/zindex.html). Belum ada konsensus tentang apa yang harus dilakukan terkait perbedaan antara browser seluler dan desktop di sini, tetapi mengingat kebingungan karena memiliki dua perilaku yang berbeda di perangkat seluler dan desktop, Chrome telah memilih untuk beralih ke satu perilaku ini di kedua platform untuk saat ini.
Diperbarui 1 Oktober 2012: Versi asli artikel ini menyatakan bahwa spesifikasi z-index CSS telah diubah untuk mencerminkan perilaku baru elemen position: fixed. Hal ini tidak akurat; hal ini telah dibahas di daftar gaya www, tetapi hingga saat ini belum ada perubahan yang diterapkan pada spesifikasi.