Эгерде сиз кошумча элементтерди колдонгон болсоңуз (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 касиетинин фон чыпкасы (ал чындыгында элементтердин артындагы аймактарды жарым-жартылай чыпкалоо үчүн белгилүү) бул жерде сиз каалаган нерсени кылат. Бул жерде жаңы стекинг контексти да түзүлгөнү менен, псевдо-элементте кошумча элементтер жок болгондуктан, анын мааниси жок.:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.