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 dengan jelas mengatakan: "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
Tetapi ada solusi untuk masalah asli: Filter latar belakang properti CSS (yang sebenarnya dikenal untuk sebagian area penyaringan di belakang elemen) melakukan apa yang kita inginkan di sini. Konteks susunan baru juga dibuat di sini, tetapi ini tidak relevan karena tidak ada elemen turunan dalam pseudo-element:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.