Sekiranya anda menggunakan elemen seperti tindanan (yang merupakan peraturan pada masa aksi GDPR) dan ingin melembutkan kawasan di sebalik lapisan, sebagai contoh, anda sering menemui masalah konteks susun . Sebagai contoh, jika anda mempunyai elemen yang diposisikan secara mutlak atau dalam kedudukan tetap, elemen tersebut tiba-tiba dipaparkan secara berbeza daripada tanpa penapis yang digunakan. Tetapi ada ubatnya.
Kod berikut menggambarkan contoh ini. Kotak di latar belakang sebenarnya harus diletakkan di kanan atas, tetapi dipindahkan:
See the Pen CSS BLUR STACKING CONTEXT #1 by David Vielhuber (@vielhuber) on CodePen.
W3C berkata dengan jelas di sini: "Ia bukan pepijat, ia adalah ciri." Spesifikasi menerangkan sambungan:
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.
Perbincangan mengenai GitHub juga patut dibaca.
Sifat CSS berikut membuat konteks susun baru, sehingga elemen anak yang diposisikan secara mutlak atau tetap tidak lagi berperilaku relatif terhadap pandangan, tetapi elemen induk yang disaring:
- filter
- transform
- backdrop-filter
- perspective
- contain
- transform-style
- will-change
Tetapi terdapat penyelesaian kepada masalah asal: Penapis latar belakang sifat CSS (yang sebenarnya dikenali untuk menapis sebahagian kawasan di belakang elemen) melakukan apa yang anda mahukan di sini. Walaupun konteks tindanan baharu turut dibuat di sini, ia tidak relevan kerana tiada unsur anak dalam unsur pseudo:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.