Эгерде сиз кошумча элементтерди колдонгон болсоңуз (GDPR иш-аракетчилдигинин учурундагы эреже) жана, мисалы, катмардын артындагы аянтты жумшартууну кааласаңыз, анда стекинг контекстинин көйгөйү көп кездешет. Мисалы, сизде абсолюттук же туруктуу абалда жайгашкан элементтер болсо, анда алар колдонулган фильтрсиз эле күтүлбөгөн жерден башкача көрсөтүлөт. Бирок бир жолу бар.
Төмөнкү код ушул мисалды чагылдырат. Фондогу кутуча чындыгында оң жактын жогорку жагына жайгаштырылышы керек, бирок ал жылдырылды:
See the Pen CSS BLUR STACKING CONTEXT #1 by David Vielhuber (@vielhuber) on CodePen.
W3C ачыктан-ачык мындай дейт: "Бул мүчүлүштүк эмес, бул өзгөчөлүк". . Өзгөчөлүгү мамилесин түшүндүрөт:
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 боюнча талкуу дагы окууга арзыйт.
Төмөнкү CSS касиеттери жаңы стек контекстин түзөт, ошентип абсолюттук же туруктуу жайгаштырылган баланын элементтери көрүнүш терезесине салыштырмалуу иштебей, фильтрленген ата-эне элементтери менен иштешет:
- filter
- transform
- backdrop-filter
- perspective
- contain
- transform-style
- will-change
Бирок баштапкы маселени чечүү жолу бар: CSS касиети backdrop-filter (бул элементтердин артындагы аймактарды жарым-жартылай чыпкалоо менен белгилүү) бул жерде биз каалагандай кылат. Бул жерде жаңы стек контексти дагы түзүлгөн, бирок бул маанисиз, анткени псевдоэлементте кошумча элементтер жок:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.