] Z-index संपत्ति के व्यापक कार्यान्वयन के बावजूद, यह कभी-कभी अपेक्षित परिणाम का उत्पादन करने में विफल रहता है।

इस मुद्दे को हल करने के लिए एक विश्वसनीय दृष्टिकोण, विशेष रूप से आधुनिक ब्राउज़रों में, CSS3 के ट्रांसफॉर्म 3 डी संपत्ति का लाभ उठाना है। इस तकनीक ने हाल के वर्षों में प्रमुखता प्राप्त की है और इस लंबे समय से चंचल चुनौती के लिए एक वर्कअराउंड प्रदान करता है।

। माता-पिता { पृष्ठभूमि: लाल; चौड़ाई: 100px; ऊंचाई: 100px; ट्रांसफॉर्म-स्टाइल: प्रिजर्व -3 डी; स्थिति: रिश्तेदार; } ।बच्चा { पृष्ठभूमि: नीला; चौड़ाई: 100px; ऊंचाई: 100px; स्थिति: निरपेक्ष; शीर्ष: -5px; वाम: -5px; ट्रांसफॉर्म: ट्रांसलेट (-10px); … बाल तत्व को तब माता -पिता के भीतर बिल्कुल तैनात किया जाता है और शीर्ष और बाएं गुणों के माध्यम से थोड़ा ऑफसेट किया जाता है। अंत में, ट्रांसफॉर्म: ट्रांसलेट (-10px) बच्चे पर लागू होता है, प्रभावी रूप से इसे z आयाम में पीछे की ओर भेजता है। माता-पिता

बच्चा

यह तकनीक बाल तत्व को माता -पिता को ओवरलैप करने की अनुमति देती है, जबकि इसके पीछे प्रदर्शित होती है, जो वांछित दृश्य प्रभाव प्रदान करती है। यह आपके गतिशील तत्वों के डिजाइन में अधिक लचीलेपन की पेशकश करते हुए पूर्ण या निश्चित स्थिति की आवश्यकता को समाप्त करता है।