ធ្វើឱ្យព្រិលទំព័រនៅពីក្រោយការលាបដោយប្រើ CSS

ប្រសិនបើអ្នកប្រើធាតុដូចជាការត្រួតលើគ្នា (ដែលជាវិធាននៅក្នុងដងនៃសកម្មភាព 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.

ការពិភាក្សាអំពី ហ្គីតហូបក៏មានតម្លៃផងដែរក្នុងការអាន។

លក្ខណសម្បត្តិ 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.

ថយក្រោយ