सीएसएस: कैसे स्थिति है: एक स्थिति के भीतर पूर्ण div: रिश्तेदार div एक अतिप्रवाह द्वारा फसली नहीं किया जाना चाहिए: एक कंटेनर पर छिपा हुआ

143

मेरे 3 स्तर हैं div:

(नीचे हरे रंग में) एक शीर्ष स्तर के divसाथ overflow: hidden। ऐसा इसलिए है क्योंकि मैं उस बॉक्स के अंदर कुछ सामग्री (जो यहां नहीं दिखाई गई) चाहता हूं कि अगर वह बॉक्स के आकार से अधिक हो जाए तो उसे काट दिया जाए।
(नीचे लाल रंग में) इसके अंदर, मेरे पास divहै position: relative। इसके लिए एकमात्र उपयोग अगले स्तर के लिए है।
(नीचे नीले रंग में) अंत में divमैं प्रवाह से बाहर निकालता हूं, position: absoluteलेकिन मैं लाल के सापेक्ष तैनात करना चाहता हूं div(पृष्ठ पर नहीं)।

मैं चाहूंगा कि नीले रंग के बॉक्स को प्रवाह से बाहर ले जाया जाए और हरे रंग के बॉक्स से आगे का विस्तार किया जाए, लेकिन लाल बॉक्स के सापेक्ष इसे निम्न प्रकार से पोस्ट किया जाए:

हालांकि, नीचे दिए गए कोड के साथ, मुझे मिल गया है:

और position: relativeलाल बॉक्स को हटाते हुए , अब नीले बॉक्स को हरे रंग के बॉक्स से बाहर निकलने की अनुमति है, लेकिन लाल बॉक्स के सापेक्ष अब स्थित नहीं है:

क्या कोई तरीका है:

overflow: hiddenहरे बॉक्स पर रखें ।
क्या हरे रंग के बॉक्स के बाहर नीले बॉक्स का विस्तार है और लाल बॉक्स के सापेक्ष स्थित है?

पूर्ण स्रोत:

#d1 {
  overflow: hidden;
  background: #efe;
  padding: 5px;
  width: 125px;
}

#d2 {
  position: relative;
  background: #fee;
  padding: 2px;
  width: 100px;
  height: 100px;
}

#d3 {
  position: absolute;
  top: 10px;
  background: #eef;
  padding: 2px;
  width: 75px;
  height: 150px;
}

<br/><br/><br/>
<div id="d1" >
  <div id="d2" >
    <div id="d3"></div>
  </div>
</div>

स्निपेट का विस्तार करें

css overflow css-position

— avernet
स्रोत

44

अच्छी तरह से स्वरूपित प्रश्न और स्रोत कोड के लिए +1

— ग्राफिकडिवाइन

क्लेरिफिकेशन: तो आप चाहते हैं कि ब्लू बॉक्स (इनर-मोस्ट डिव) ग्रीन बॉक्स (बाहरी-सबसे डिव) से बाहर निकलने में सक्षम हो, लेकिन हरे बॉक्स पर ओवरफ्लो छिपाए रखें? तो मूल रूप से, हरे रंग के बॉक्स में हर चीज पर ओवरफ्लो छिपा है, नीले बॉक्स को एक्सेप्ट करें, क्या यह सही है?

— एंथनी

एंथनी, हाँ, यह बिल्कुल यही है। और मुझे इस बात की परवाह नहीं है कि लाल बॉक्स (# 2) का क्या होता है, जो कि नीले बॉक्स (# 3) पर शीर्ष / सही प्रभाव डालने के लिए है।

— औसतन

2

एक प्रश्न को ठीक से समझाने के लिए +1 जो मुझे लगा कि व्याख्या करना बहुत कठिन है लेकिन वास्तव में इसका उत्तर चाहता था।

— एंड्रयू माओ

position: fixedoverflow:hiddenकिसी भी युक्त तत्व की उपेक्षा करेगा ।

— केविन बील

48

एक ट्रिक जो काम करती है वह है बॉक्स बॉक्स # 2 की position: absoluteजगह position: relative। हम आम तौर position: relativeपर एक बाहरी बॉक्स (यहां बॉक्स # 2) डालते हैं जब हम एक आंतरिक बॉक्स (यहां बॉक्स # 3) चाहते हैंposition: absolute बाहरी बॉक्स के सापेक्ष चाहते हैं। लेकिन याद रखें: बॉक्स # 3 के लिए बॉक्स # 2 के सापेक्ष तैनात होने के लिए, बॉक्स # 2 को केवल तैनात करने की आवश्यकता है। इस परिवर्तन के साथ, हमें यह मिलता है:

और यहाँ इस परिवर्तन के साथ पूर्ण कोड है:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css">

            /* Positioning */
            #box1 { overflow: hidden }
            #box2 { position: absolute }
            #box3 { position: absolute; top: 10px }

            /* Styling */
            #box1 { background: #efe; padding: 5px; width: 125px }
            #box2 { background: #fee; padding: 2px; width: 100px; height: 100px }
            #box3 { background: #eef; padding: 2px; width: 75px; height: 150px }

        </style>
    </head>
    <body>
        <br/><br/><br/>
        <div id="box1">
            <div id="box2">
                <div id="box3"/>
            </div>
        </div>
    </body>
</html>

— avernet
स्रोत

5

मैं वास्तव में इस्तेमाल किया position: staticऔर मेरे लिए बेहतर काम किया

— जेसन

@ जेसन, बहुत दिलचस्प; इसलिए आप कह रहे हैं कि आप position: staticइसके बजाय बॉक्स # 2 का उपयोग करते हैं position: absolute।

— औसतनेट

1

क्या आप यह स्पष्ट कर सकते हैं कि absoluteक्लिप क्यों नहीं है लेकिन relativeकरता है?

— एंड्रयू माओ

1

यह समाधान तब तक काम नहीं करेगा जब तक कि आप # 1 और # 3 के बीच सब कुछ पूर्ण नहीं बनाते हैं। व्यावहारिक रूप से, यह असंभव है।

— हवामहलो

1

सोच रहा था कि रंगों की तरह कुछ SO विज़ुअल को समझाने का क्या उद्देश्य है ...

— ed1nh0

5

एक अतिप्रवाह छिपा कंटेनर के बाहर कुछ प्रदर्शित करने का कोई जादुई समाधान नहीं है।

एक समान प्रभाव एक पूर्ण स्थिति में होने से प्राप्त किया जा सकता है जो अपने वर्तमान रिश्तेदार कंटेनर के अंदर स्थिति द्वारा अपने माता-पिता के आकार से मेल खाता है (आप जिस क्लिप को नहीं करना चाहते हैं वह इस div के बाहर होना चाहिए):

#1 .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  overflow: hidden;
}

ध्यान रखें कि यदि आपको केवल x अक्ष पर सामग्री को क्लिप करना है (जो कि आपका मामला प्रतीत होता है, जैसा कि आपने केवल div की चौड़ाई निर्धारित की है), आप उपयोग कर सकते हैं overflow-x: hidden।

— शिकंजा
स्रोत

0

मैं वास्तव में ऐसा करने का तरीका नहीं देखता। मुझे लगता है कि आपको overflow:hiddenअपनी अनिर्दिष्ट 'सामग्री' को रखने के लिए div # 1 से हटाने और div # 1 के भीतर एक और div जोड़ने की आवश्यकता हो सकती है (यानी # 2 को भाई के रूप में) overflow:hidden। मुझे नहीं लगता कि अतिप्रवाह ओवर-राइडेड हो सकता है (या होना चाहिए)।

— graphicdivine
स्रोत

0

अगर बाहरी-डिव (ग्रीन बॉक्स) के अंदर अन्य सामग्री नहीं दिखाई जा रही है, तो उस सामग्री को दूसरे डिव के अंदर क्यों नहीं रखा जाता है, आइए इसे कॉल करते हैं "content" । इस नए इनर-डिव पर ओवरफ्लो छिपाएं, लेकिन हरे बॉक्स पर ओवरफ्लो दिखाई दें।

एकमात्र पकड़ यह है कि आपको यह सुनिश्चित करने के लिए चारों ओर गड़बड़ करना होगा कि सामग्री डिव लाल बॉक्स की स्थिति में हस्तक्षेप नहीं करता है, लेकिन ऐसा लगता है कि आपको थोड़ा सिरदर्द के साथ इसे ठीक करने में सक्षम होना चाहिए।

<div id="1" background: #efe; padding: 5px; width: 125px">
    <div id="content" style="overflow: hidden;">
    </div>
    <div id="2" style="position: relative; background: #fee; padding: 2px; width: 100px; height: 100px">
        <div id="3" style="position: absolute; top: 10px; background: #eef; padding: 2px; width: 75px; height: 150px"/>
    </div>
</div>

— एंथोनी
स्रोत