Örneğin, (GDPR eylemciliği zamanlarında kural olan) kaplamalar gibi öğeler kullanırsanız ve kaplamanın arkasındaki alanı yumuşatmak isterseniz, genellikle yığın bağlamı sorunuyla karşılaşırsınız. Örneğin, tamamen veya sabit bir konumda konumlandırılmış öğeleriniz varsa, bunlar aniden filtre uygulanmamış olandan farklı bir şekilde görüntülenir. Ancak bir çare var.
Aşağıdaki kod, bu örneği göstermektedir. Arka plandaki kutu aslında sağ üstte konumlandırılmalıdır, ancak taşınır:
See the Pen CSS BLUR STACKING CONTEXT #1 by David Vielhuber (@vielhuber) on CodePen.
W3C açıkça şunu söylüyor: "Bu bir hata değil, bir özellik." . Spesifikasyon ilişkiyi açıklıyor:
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.
GitHub'daki tartışma da okumaya değer.
Aşağıdaki CSS özellikleri yeni bir yığın bağlamı oluşturur, böylece kesinlikle veya sabit şekilde konumlandırılmış alt öğeler artık görüntü alanına göre değil, filtrelenen ana öğeye göre davranır.:
- filter
- transform
- backdrop-filter
- perspective
- contain
- transform-style
- will-change
Ancak orijinal soruna bir çözüm var: CSS özelliği zemin filtresi (aslında öğelerin arkasındaki alanları kısmen filtrelemesiyle bilinir) burada istediğimizi yapar. Burada yeni bir yığın bağlamı da oluşturulur, ancak sözde öğede hiçbir alt öğe olmadığından bu önemsizdir.:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.