जेड-इंडेक्स एक टेबल के अंदर काम नहीं कर रहा है

Question

मुझे टेबल के बाहर एक पूर्ण div को पोजिशन करने में समस्या हो रही है, मैं टेबल लेआउट का बड़ा प्रशंसक नहीं हूं लेकिन मुझे टेबल लेआउट के साथ एक मौजूदा प्रोजेक्ट मिला है। एक FCKeditor कि एक div के अंदर एक छवि है के लिए प्रतिस्थापन स्ट्रिंग है, मैं निर्धारित किया है कि div के z- कोड के रूप में

<td colspan="2" align="right" style="padding-top:3px; padding-right:15px; padding-bottom:15px;" width="600px"> 
        <table cellpadding="0" cellspacing="0" border="0"> 
         <tr><td height="37px" width="600px" style="background-image:url('P--IMG--P/welcomepanel/header.png'); background-repeat:no-repeat; background-position:bottom left;"><span class="heading" id="I--heading_text--I" style="padding-top:3px;"></span></td></tr> 
         <tr> 
          <td align='left' valign='middle' width="600px" height="522px" style="background-image:url('P--IMG--P/welcomepanel/middelblock_repeat.png'); background-repeat: repeat-y; padding-top:0px"> 
           <div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;"> 
            [--C--comp--C--] 
           </div> 
          </td> 
         </tr> 
         <tr><td><img src="P--IMG--P/welcomepanel/middelblock_roundcorners.png"/></td></tr> 
        </table> 
       </td> 

कहाँ "[- - अनि C-- --C]" इस प्रकार है सूचकांक 10 तक है लेकिन यह तालिका से बाहर नहीं जाना चाहता .. और इसकी स्थिति पूर्ण है।

कृपया मुझे बताएं कि मैं क्या गलत कर रहा हूं।

मुझे एहसास हुआ है कि समस्या टीडी कंटेनर पर ओवरफ्लो-स्क्रॉल के साथ आता है, यदि आप overflow-y:scroll को हटाते हैं तो यह ठीक काम करता है, लेकिन समस्या यह है कि मुझे उस अतिप्रवाह की आवश्यकता है क्योंकि अंदर बहुत सारी सामग्री है वह टीडी मुझे नहीं पता कि अब क्या करना है। :(.. किसी एक भाई की मदद कृपया!

मैं छोटा नक्शा जरूरत मेज और बड़ा नक्शा तालिका के अंदर रहने के लिए बाहर होने के लिए, यह छोटे छवि दिखाता है जब आप पर हॉवर jquery से ज़ूम करने के लिए बड़ा नक्शा ज़ूम करने के लिए, जो मुझे फ्लेमेडिटर पर लोड किया जाता है। मुझे उम्मीद है कि यह मदद करता है ..

Answer 1

जेड-इंडेक्स सही तरीके से काम करने के लिए, जेड-इंडेक्स प्रॉपर्टी वाले प्रत्येक तत्व में भी कोई स्थिति सेट होना चाहिए (उदा। : रिश्तेदार)। इसके अलावा, मैं तालिका को दो की तुलना करने के लिए एक स्थिति और जेड-इंडेक्स असाइन करता हूं।

Answer 2

यह कहकर कि आप चाहते हैं तालिका से बाहर जाने के लिए "पूरी तरह से स्थित तत्व" के लिए, क्या आपका मतलब है कि आप टेबल के स्थान पर आधारित नहीं, तालिका के बाहर स्थित होना चाहते हैं? या क्या आपका मतलब है कि आप इसे टेबल के अंदर स्थित करना चाहते हैं, लेकिन तालिका की सीमाओं पर फिसल नहीं गए हैं या अन्य सामग्री के साथ ओवरलैप नहीं हैं?

यदि यह पूर्व है, तो मैं कोड में कहीं और स्थित डीआईवी को स्थानांतरित करने का सुझाव दूंगा। इसे टेबल के अंदर क्यों रखा जाए यदि यह वहां नहीं दिखाया जा रहा है? यह सिर्फ स्टैकिंग संदर्भ और अतिप्रवाह गुणों को काम करने के लिए कठिन बनाता है।

यदि यह बाद वाला है, तो आप उस div पर overflow-x और overflow-y गुणों को समायोजित या निकालना चाहते हैं जिनमें आपका बिल्कुल स्थान दिया गया तत्व शामिल है। यह कल्पना की जा सकती है कि ब्राउज़र अभी भी बाल तत्वों के लिए अतिप्रवाह क्लिपिंग नियम लागू करेगा, भले ही वे पूरी तरह से स्थित हों।

यह भी ध्यान रखें कि z-index केवल भाई तत्वों के स्टैकिंग क्रम को प्रभावित करने के लिए है। तत्व जो पेड़ के समान स्तर पर हैं, दूसरे शब्दों में आपके 500 पीएक्स-ऊंचाई div के अंदर अन्य तत्वों को उनके जेड-ऑर्डर के अनुसार रखा जाएगा, लेकिन माता-पिता और बच्चे नोड विभिन्न नियमों से खेलते हैं।

यदि यह उत्तर मदद नहीं करता है, तो शायद मैं गलत समझ रहा हूं कि आप क्या करना चाहते हैं। क्या आप एक तस्वीर पोस्ट कर सकते हैं कि यह कैसा व्यवहार कर रहा है और वर्णन करता है कि आप इसे कैसे व्यवहार करना चाहते हैं? जबाब चित्र में

संपादित पोस्ट किए जाने से:

मुझे लगता है कि आप इस मामले में क्या करना चाहते हैं किसी भी तरह स्क्रॉल DIV के बाहर छोटे नक्शा प्राप्त करने के लिए है। क्या आप इसे बदल सकते हैं ...

<div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;"> 
    [--C--comp--C--] 
</div> 

... ऐसा कुछ करने के लिए?

[--C--compSmallMap--C--] <!-- Small map code goes here --> 
<div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;"> 
    [--C--compBigMap--C--] <!-- Big map code goes here --> 
</div> 

यदि नहीं, तो कोड है कि इतना है कि यह कोड में एक उच्च स्तर पर छोटे मानचित्र बनाता डाला रही है बदल सकता है? उदाहरण के लिए, आप document.getElementsByTagName("body")[0].appendChild(element); का उपयोग कर रूट नोड में तत्व जोड़ सकते हैं (इसके अलावा एक बेहतर तरीका हो सकता है, बस एक उदाहरण)। इसका उपयोग करके, या ऐसा कुछ, आप अपने छोटे मानचित्र को दस्तावेज़ पेड़ में ऊपर रख सकते हैं, जो इसे क्लिपिंग से रोक देगा।