क्या अतिप्रवाह है: छिपा हुआ 'पूर्ण बच्चों की स्थिति बदल रहा है?

Question

मेरे पास केवल सीएसएस के साथ बाहर एक छवि गैलरी स्लाइडिंग छवियां हैं। उदाहरण के लिए http://codepen.io/anon/pen/xmhzE?editors=110 देखें या संलग्न कोड के लिए।

यह तब तक ठीक काम करता है जब तक #images -div overflow: hidden सेट नहीं है। जब अतिप्रवाह छिपाने के लिए सेट किया जाता है, तो एकल छवियों की पूर्ण स्थिति अब और काम नहीं करती है। जब मैं left के लिए नकारात्मक मानों का उपयोग करता हूं- छवियों की प्रॉपर्टी यह ओवरफ्लो छुपा हुआ भी काम करता है।

क्या overflow:hidden इस बात को बदलता है कि पूर्ण बच्चों को कैसे लेआउट किया जाता है?

क्या किसी को भी इस समस्या का समाधान है?

---

सूत्रों का कहना है

index.html:

<div id="images"> 
    <img id="image1" src="http://i.imgur.com/dL3io.jpg" /> 
    <img id="image2" src="http://i.imgur.com/qASVX.jpg" /> 
    <img id="image3" src="http://i.imgur.com/fLuHO.jpg" /> 
    <img id="image4" src="http://i.imgur.com/5Sd3Q.jpg" /> 
</div> 
<div id="slider"> 
    <a href="#image1">1</a> 
    <a href="#image2">2</a> 
    <a href="#image3">3</a> 
    <a href="#image4">4</a> 
</div> 

base.css:

body { 
    text-align: center; 
    } 
#images { 
    width: 400px; 
    height: 250px; 
    /*overflow: hidden; if this is set absolute positioning of images breaks*/ 
    position: relative; 
    background-color: red; 

    margin: 20px auto; 
} 
#images img { 
    width: 400px; 
    height: 250px; 
    display: block; 

    position: absolute; 
    top: 0px; 
    left: 400px; 
    z-index: 1; 
    opacity: 0; 

    transition: all linear 500ms; 
    -o-transition: all linear 500ms; 
    -moz-transition: all linear 500ms; 
    -webkit-transition: all linear 500ms; 
} 
#images img:target { 
    top: 0px; 
    left: 0px; 
    z-index: 9; 
    opacity: 1; 
} 
#slider a { 
    text-decoration: none; 
    background: #E3F1FA; 
    border: 1px solid #C6E4F2; 
    padding: 4px 6px; 
    color: #222; 
} 
#slider a:hover { 
    background: #C6E4F2; 
} 

Answer 1

यह पहेली मुझे जाना जारी रखा। मैं बस इसे छोड़ नहीं सका। तो आखिरी शाम मैं इसके साथ झुका रहा था, लेकिन इसे ठीक नहीं कर सका (अभी तक अभी तक :))।

testcase 1

चीजें मैं छवि तत्वों से अस्पष्टता हटा दिया और केवल 1 छवि और एक लिंक छोड़ सरल बनाने है। मैंने छवि को शुरुआत में 390 पीएक्स पर सेट कर दिया है ताकि मैं सुनिश्चित कर सकूं कि यह उस स्थिति में है (आप इसके बाईं ओर थोड़ा सा देख सकते हैं)।

http://codepen.io/anon/pen/tpCrc

निष्कर्ष:

तो क्या सूचना के लिए महत्वपूर्ण है कि तथ्य यह है कि छवि में प्रारंभिक है जहां यह होना चाहिए। फिर बटन 1 पर क्लिक करते समय आप इसे आसानी से संक्रमण को छोड़ सकते हैं। तो ब्राउजर ओवरफ्लो की वजह से तत्व की स्थिति नहीं बदलता है: छिपा हुआ (इस पोस्ट के शीर्षक की तरह सुझाव देता है)। यह सीएसएस में वर्णित स्थिति में जाता है (लक्ष्य भाग में), लेकिन संक्रमण के बिना।

testcase 2

तो मैं क्यों ब्राउज़र कि जिस तरह से काम करेगा और मैं यह सोच कर कि शायद छवि तत्व का ध्यान केंद्रित इसके साथ कुछ करने के लिए किया था रखा सोच कर ली। यदि आप इसके बारे में सोचते हैं: जब आप बटन और ब्राउज़र के URL पर #target जोड़ते हैं, तो उस तत्व पर क्लिक करके उस तत्व पर "स्क्रॉल" करने का प्रयास करता है। उस के लिए, उस तत्व को विचित्र होना चाहिए।

तो मुझे आश्चर्य हुआ: शायद सीएसएस के पास इसके साथ कुछ लेना देना नहीं है। आइए प्रयास करें: इसलिए मैंने पूरी तरह से लक्ष्य-भाग और संक्रमण को हटा दिया।

http://codepen.io/anon/pen/IvfBE

निष्कर्ष:

वाह! हम वहां क्या देखते हैं?बटनों में से किसी एक पर क्लिक करते समय छवि अभी भी बाईं ओर कूदती है: 0 !! मुझे लगता है कि हमें वहां एक लीड मिली है। फिर भी, मुझे नहीं पता था कि वास्तव में इसे कैसे ठीक किया जाए। अभी भी मेरे लिए एक ब्राउज़र-बग की तरह लगता है।

ठीक

तब - सोने की एक अच्छी रात के बाद - मैं अब एकदम नए विचार के साथ जाग उठा। क्या होगा यदि हम वास्तव में उस तत्व को लक्षित नहीं करते हैं जिसे हम संक्रमण करना चाहते हैं?

इसलिए मैंने प्रत्येक छवि-तत्व में एक कंटेनर जोड़ा और इसके बजाय लक्षित किया।

<div id="images"> 
    <div id="img1container"><img id="image1" src="http://i.imgur.com/dL3io.jpg" /></div> 
    <div id="img2container"><img id="image2" src="http://i.imgur.com/qASVX.jpg" /></div> 
    <div id="img3container"><img id="image3" src="http://i.imgur.com/fLuHO.jpg" /></div> 
    <div id="img4container"><img id="image4" src="http://i.imgur.com/5Sd3Q.jpg" /></div> 
</div> 
<div id="slider"> 
    <a href="#img1container">1</a> 
    <a href="#img2container">2</a> 
    <a href="#img3container">3</a> 
    <a href="#img4container">4</a> 
</div> 

सीएसएस में छवि की स्थिति को अब "[parentElement]: target img" द्वारा बदला जाना है।

body { 
    text-align: center; 
} 
#images { 
    width: 400px; 
    height: 250px; 
    overflow: hidden; /* this did break it in the past ;) */ 
    position: relative; 
    background-color: red; 

    margin: 20px auto; 
} 
#images img { 
    width: 400px; 
    height: 250px; 
    display: block; 

    position: absolute; 
    top: 0px; 
    left: 400px; 
    z-index: 1; 
    opacity: 0; 

    transition: all linear 500ms; 
    -o-transition: all linear 500ms; 
    -moz-transition: all linear 500ms; 
    -webkit-transition: all linear 500ms; 
} 
#images div:target img { 
    top: 0px; 
    left: 0px; 
    z-index: 9; 
    opacity: 1; 
} 
#slider a { 
    text-decoration: none; 
    background: #E3F1FA; 
    border: 1px solid #C6E4F2; 
    padding: 4px 6px; 
    color: #222; 
} 
#slider a:hover { 
    background: #C6E4F2; 
} 

और काम कर रहे उदाहरण: http://codepen.io/anon/pen/lyzhi

निष्कर्ष:

Yay !! दरअसल, उस तत्व पर ध्यान केंद्रित न करके जिसे आप संक्रमण करना चाहते हैं, यह टूट नहीं जाता है। तो, आपको अपना फिक्स मिल गया है, लेकिन यह अभी भी मेरे लिए ब्राउज़र/इंजन-बग जैसा लगता है। तो मैं सुझाव दूंगा कि आप कहीं भी एक बग्रेपोर्ट बनाएं (यदि आपके पास समय है)।

बीटीडब्ल्यू: मैंने क्रोम और आईई में इसका परीक्षण किया है - केवल नवीनतम संस्करण दोनों। आप फ़ायरफ़ॉक्स और शायद कुछ अन्य ब्राउज़रों में इसका परीक्षण करना चाहेंगे।