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 dengan jelas mengatakan: "Ini bukan bug, ini adalah ciri." . Spesifikasi menerangkan hubungan:
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 ada penyelesaian untuk masalah asal: Penapis latar harta tanah CSS (yang sebenarnya terkenal dengan sebahagiannya menyaring kawasan di belakang elemen) melakukan apa yang kita mahukan di sini. Konteks susun baru juga dibuat di sini, tetapi ini tidak relevan kerana tidak ada unsur anak dalam elemen pseudo:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.