மேலடுக்குகள் (இது மொத்த உள்நாட்டு உற்பத்தியில் செயல்படும் காலத்தின் விதி) போன்ற கூறுகளைப் பயன்படுத்தினால், மேலடுக்கின் பின்னால் உள்ள பகுதியை மென்மையாக்க விரும்பினால், எடுத்துக்காட்டாக, குவியலிடுதல் சூழலின் சிக்கலை நீங்கள் அடிக்கடி சந்திப்பீர்கள் . எடுத்துக்காட்டாக, உங்களிடம் கூறுகள் முற்றிலும் அல்லது ஒரு நிலையான நிலையில் இருந்தால், அவை திடீரென பயன்படுத்தப்பட்ட வடிப்பான் இல்லாமல் வித்தியாசமாகக் காட்டப்படும். ஆனால் ஒரு தீர்வு இருக்கிறது.
பின்வரும் குறியீடு இந்த உதாரணத்தை விளக்குகிறது. பின்னணியில் உள்ள பெட்டி உண்மையில் மேல் வலதுபுறத்தில் வைக்கப்பட வேண்டும், ஆனால் அது நகர்த்தப்படுகிறது:
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.