CSS : Parent won't clearing child with absolute position -
इसलिए मेरे पास 3 बॉक्स है:
बॉक्स 1 = लाल बॉक्स 2 = नीला बॉक्स 3 = पीले बॉक्स 1 बॉक्स में बॉक्स 2 बॉक्स 2 में बॉक्स 3 बॉक्स 3 शामिल हैं, डिविज़्स को जारी किया गया है और अतिरिक्त डिव स्टाइल का उपयोग करके साफ़ किया गया है = "स्पष्ट: दोनों" मुझे बॉक्स 2 को एक पूर्ण इस तरह से बॉक्स 1 की स्थिति:
मैंने इस तरह की कोशिश की है, लेकिन काम नहीं करेगा:
एचटीएमएल:
& lt; div class = " box1 "& gt; & Lt; div वर्ग = "बॉक्स 2" & gt; & Lt; div वर्ग = "बॉक्स 3" & gt; बॉक्स -3 & lt; / div & gt; & Lt; div वर्ग = "बॉक्स 3" & gt; बॉक्स -3 & lt; / div & gt; & Lt; div वर्ग = "बॉक्स 3" & gt; बॉक्स -3 & lt; / div & gt; & Lt; div वर्ग = "बॉक्स 3" & gt; बॉक्स -3 & lt; / div & gt; & Lt; div वर्ग = "बॉक्स 3" & gt; बॉक्स -3 & lt; / div & gt; & Lt; div शैली = "स्पष्ट: दोनों;" & gt; & lt; / div & gt; & Lt; / div & gt; परीक्षण & lt; / div & gt; शैली: <पूर्व> .box1 {width: 300px; पृष्ठभूमि रंग: लाल; स्थिति: रिश्तेदार; } .box2 {width: 200px; पृष्ठभूमि का रंग: नीला; स्थिति: पूर्ण; सही: -100px; शीर्ष: 30px; } .box3 {ऊंचाई: 50px; चौड़ाई: 50px; पृष्ठभूमि रंग: पीला; बाईंओर तैरना; मार्जिन: 10px; कला रंग; } यहां कोडपेन है:
क्या कोई भी मदद कर सकता है?
धन्यवाद
क्या स्थिति: रिश्तेदार से .box1 निकालने के बारे में है, और स्थिति: निरपेक्ष को .position: relative in .box2 नीचे स्निपेट देखें, और .box2 .box1 {width: 300px; पृष्ठभूमि रंग: लाल; } .box2 {width: 200px; पृष्ठभूमि रंग: नीला; स्थिति: रिश्तेदार; सही: -150px; / * इस मान को -150px बदल दिया »» -100px * / top: 10px; / * ने इस मान को 10px बदल दिया »» 30px * / padding: 10px / * पैडिंग को जोड़ने की जरूरत है और अगर आपको * /} की आवश्यकता होती है। Box3 {height: 50px; चौड़ाई: 50px; पृष्ठभूमि रंग: पीला; बाईंओर तैरना; मार्जिन: 10 पीएक्स; कला रंग; } & lt; div class = "box1" & gt; & Lt; div वर्ग = "बॉक्स 2" & gt; & Lt; div वर्ग = "बॉक्स 3" & gt; बॉक्स -3 & lt; / div & gt; & Lt; div वर्ग = "बॉक्स 3" & gt; बॉक्स -3 & lt; / div & gt; & Lt; div वर्ग = "बॉक्स 3" & gt; बॉक्स -3 & lt; / div & gt; & Lt; div वर्ग = "बॉक्स 3" & gt; बॉक्स -3 & lt; / div & gt; & Lt; div वर्ग = "बॉक्स 3" & gt; बॉक्स -3 & lt; / div & gt; & Lt; div शैली = "स्पष्ट: दोनों;" & gt; & lt; / div & gt; & Lt; / div & gt; परीक्षण & lt; / div & gt;
Comments
Post a Comment