अभिभावक के बाल तत्व कवर सीमा को कैसे बनाया जाए?

Question

यहां एक ऐसी चीज है जो मैं करने की कोशिश कर रहा हूं। अगर यह पर्याप्त रूप से पर्याप्त नहीं समझाता है तो मैं एक पहेली को एक साथ फेंक सकता हूं।

ब्लैक बॉक्स एक <div> है और गुलाबी लोगों को भी divs हैं। मैं चाहता हूं कि उनके लिए जैसे टैब देखें। तो जब कोई सक्रिय होता है, तो यह टैब में महत्वपूर्ण 'पुल' प्रभाव देने वाले माता-पिता की सीमा को कवर करता है।

मैंने सोचा कि मैं केवल सक्रिय एक और चौड़ा बना सकता हूं ताकि यह सीमा को कवर कर सके। समस्या यह है कि यदि मेरे पास overflow-x: hidden; है तो व्यापक हिस्सा काला रूपरेखा 'नीचे' है और यदि मैं ऑटो या दृश्यमान करता हूं तो यह इसे स्क्रॉल करने देता है।

एक महत्वपूर्ण बात: गुलाबी स्थिति को सापेक्ष रखने की आवश्यकता है।

मैं क्या गलत कर रहा हूं?

संपादित करें: सबसे महत्वपूर्ण भाग का उल्लेख करना भूल गए। ब्लैक बॉक्स में overflow-y: hidden है। इसके बिना नीचे दिए गए तरीके ठीक काम करते हैं, लेकिन जब मैं इसे जोड़ता हूं, तो यह वापस जाता है कि यह

Answer 1

हो सकता है कि इस दृष्टिकोण से आपको मदद मिलेगी:

<div class="main"> 
    <div class="selected"><div></div></div> 
    <div><div></div></div> 
    <div><div></div></div> 
</div> 

और सीएसएस:

.main {text-align: right;border: 10px solid #000;} 
.main > div > div {width: 100px; height: 60px; display: inline-block;background-color: red;margin: 10px 0;} 
.main > .selected > div {margin-right: -10px;padding-left: 10px;} 

jsFiddle Demo

Answer 2

आपको बस अपने कंटेनर div पर चौड़ाई निर्धारित करने की आवश्यकता है, और overflow-x hidden; का उपयोग न करें। http://jsfiddle.net/YhAmh/1/

Answer 3

के बाद से अपने गुलाबी divs पहले से ही position: relative है, तो आप सिर्फ सक्रिय लोगों सही करने के लिए एक सा ऑफसेट:

.activediv{ 
    left: 5px; 
} 

Answer 4

क्या आप position: relative के बजाय position: absolute का उपयोग करते हैं प्राप्त कर सकते हैं

यहाँ एक उदाहरण है पैरेंट div में overflow-y: hidden के साथ वह लेआउट।

आप परिणाम देख सकते हैं: http://jsfiddle.net/eugip9/sqjck/