Jika Anda menggunakan elemen seperti overlay (yang merupakan aturan saat aksi GDPR) dan ingin memperhalus area di belakang overlay, misalnya, Anda sering menjumpai masalah konteks tumpukan . Misalnya, jika Anda memiliki elemen yang diposisikan secara absolut atau dalam posisi tetap, elemen tersebut tiba-tiba ditampilkan secara berbeda daripada tanpa filter yang diterapkan. Tapi ada obatnya.
Kode berikut menggambarkan contoh ini. Kotak di latar belakang seharusnya diposisikan di kanan atas, tetapi dipindahkan:
See the Pen CSS BLUR STACKING CONTEXT #1 by David Vielhuber (@vielhuber) on CodePen.
W3C mengatakan dengan jelas di sini: "Ini bukan bug, ini fitur." Spesifikasi menjelaskan hubungannya:
A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context. The list of functions are applied in the order provided.
Diskusi di GitHub juga patut dibaca.
Properti CSS berikut membuat konteks tumpukan baru, sehingga elemen turunan yang diposisikan secara mutlak atau tetap tidak lagi berperilaku relatif terhadap viewport, tetapi ke elemen induk yang difilter:
- filter
- transform
- backdrop-filter
- perspective
- contain
- transform-style
- will-change
Namun ada solusi untuk masalah awal: Properti CSS backdrop-filter (yang sebenarnya dikenal untuk memfilter sebagian area di belakang elemen) melakukan apa yang Anda inginkan di sini. Meskipun konteks penumpukan baru juga dibuat di sini, ini tidak relevan karena tidak ada elemen turunan di elemen semu:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.