क्रोम: जब माता-पिता को

Question

तय किया गया है तो एक पूर्ण div को दूसरे स्थान पर नहीं रख सकता है, मैंने पाया है कि मैं क्रोम में किसी अन्य स्थान पर एक बिल्कुल स्थानांतरित div को स्थिति में नहीं रख सकता जब div के माता-पिता शीर्ष पर होना चाहते हैं तय:

http://jsfiddle.net/SEJhg/

आप Chrome में उस देखना चाहिए z- सूचकांक 10 प्रकट होता है जेड के साथ हरे रंग बिल्कुल तैनात div के पीछे के साथ पीला बिल्कुल तैनात div:

<div id="parent"> 
    <div id="top"></div> 
</div> 
<div id="bottom"></div> 

यहाँ एक JSFiddle समस्या का प्रदर्शन कर रहा है -इंडेक्स: 1, beca माता-पिता की निश्चित स्थिति का उपयोग।

फ़ायरफ़ॉक्स जैसे अन्य ब्राउज़र हरे रंग के शीर्ष पर पीले रंग के div को दिखाते हैं।

क्रोम में इसे ठीक करने के तरीके पर कोई सुझाव? मैं माता-पिता की निश्चित स्थिति को बदलने में सक्षम नहीं हूं।

धन्यवाद! केवल क्रोम के लिए

Answer 1

क्या आप अनुभव कर रहे क्रोम में एक अपेक्षाकृत नए व्यवहार, मोबाइल ब्राउज़र के साथ डेस्कटॉप ब्राउज़र के व्यवहार संरेखित करने के लिए शुरू की है।

जब किसी तत्व में position: fixed; आपके #parent की तरह है, तो उस तत्व के लिए एक नया स्टैकिंग संदर्भ बनाया गया है, जिसका अर्थ है कि तत्व और उसके बच्चे अपेक्षाकृत विंडो संदर्भ के बजाय अपेक्षाकृत एक दूसरे के लिए ढेर हैं। इसलिए, एक तत्व जो निश्चित तत्व (#bottom) का बच्चा नहीं है उसे #parent और #top "के बीच" नहीं रखा जा सकता है।

आपका समाधान या तो स्थानांतरित करने के लिए #bottom#parent अंदर (एक ही स्टैकिंग संदर्भ में डालने), या तय की तुलना में कुछ और करने के लिए #parent की स्थिति विधि बदल रहा होगा।

क्रोम में इस बदलाव के लिए प्रस्ताव यहां पाया जा सकता है: http://lists.w3.org/Archives/Public/www-style/2012May/0473.html

Answer 2

Cthe स्थिति:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
#parent { 
    position: absolute; 
    } 
} 

http://jsfiddle.net/5fKq6/ देखें सभी ब्राउज़रों में।

Answer 3

मैंने इस के साथ चारों ओर झुका दिया है और निष्कर्ष यह है कि क्रोम में parent और top तत्व अविभाज्य हैं। मैंने इस निष्कर्ष पर आने की कोशिश की तत्व parent "सैंडविच" से ऊपर और जेड-इंडेक्स के साथ झुकाव लगा रहा था। मैं bottom सैंडविच के ऊपर या नीचे दिखाई दे सकता हूं, लेकिन सीधे इसमें नहीं।

क्या मेरे लिए काम किया है यह था:

<div id="parent"> 
    <div id="bottom"></div> 
    <div id="top"></div> 
</div> 

मैं तो यह आपके लिए एक बेकार प्रतिक्रिया हो सकती है अपने पृष्ठ के संदर्भ पता नहीं है, लेकिन मुझे लगता है कि ऐसा करने के लिए और उसके बाद की स्थिति का समायोजन पेज के एक्स और वाई अक्षों में वांछित परिणाम प्राप्त करें, जैसा कि आपने आशा की थी, बाहर से सैंडविच में तत्व को पर्ची करने की कोशिश करने से आसान होगा।

Answer 4

इस कोड का प्रयास करें:

<div id="parent"> 
<div id="bottom"></div> 

</div>

<div id="top"></div> 

Answer 5

मैं क्रोम संस्करण का उपयोग कर रहा हूँ: 21.0.1180.89 मीटर और पीला, हरा ऊपर तैनात किया गया है।