Ö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 burada açıkça şunu söylüyor: "Bu bir hata değil, bir özellik." Spesifikasyon bağlantıyı 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 asıl sorunun bir çözümü var: CSS özelliği arka filtre (aslında öğelerin arkasındaki alanları kısmen filtrelemesiyle bilinir) burada istediğinizi yapar. Burada yeni bir yığınlama bağlamı da oluşturulmuş olsa da, sözde öğede hiçbir alt öğe olmadığından konuyla ilgisi yoktur.:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.