"डिस्प्ले: टेबल-सेल" क्यों टूटा हुआ है जब "स्थिति: पूर्ण"

Question

मैं एक अजीब समस्या में भाग गया। मैं एक कंटेनर के रूप में डीआईवी का उपयोग करता हूं, और एक छवि को इस डीवी में डालता हूं। मैं चाहता हूं कि यह छवि नीचे से लंबवत रूप से गठबंधन हो। निम्नलिखित कोड काम करता है।

#banner { 
    width: 700px; 
    height: 90px; 
    top: 60px; 
    left: 178px; 
    overflow: hidden; 
    text-align: center; 
    display: table-cell; 
    vertical-align: bottom; 
    position: relative; 
} 

<div id="banner"> 
    <img src="http://www.google.de/intl/de_de/images/logo.gif"/> 
</div> 

लेकिन अगर मैं बदल सीएसएस कोड "स्थिति: रिश्तेदार" के लिए "स्थिति: निरपेक्ष", छवि नीचे करने के लिए किसी भी अधिक गठबंधन नहीं किया जा सकता। क्या यह फ़ायरफ़ॉक्स 3 की एक बग है? इस समस्या का समाधान किस प्रकार से किया जा सकता है?

मेरे वर्तमान समाधान है:

<div id="banner"> 
    <table width="100%" height="100%"><tr><td valign="bottom" align="center"> 
    <img src="http://www.google.de/intl/de_de/images/logo.gif"/> 
    </td></tr></table> 
</div> 

लेकिन मैं इस समाधान पसंद नहीं है।

Answer 1

लघु जवाब: बदलें

top: 60px; 

को

bottom: 60px; 

लांग जवाब:

घोषणा position: absolute जहाँ भी यह है से बाहर अपने तत्व लेता है और यह अंतरतम तत्व के सापेक्ष जगह है कि स्थैतिक घोषित नहीं किया गया है। अब किसी अन्य तत्व के संरेखण में भाग नहीं लेते हैं, इसलिए यह अब टेबल-सेल के रूप में कार्य नहीं करता है (घोषणा का कोई प्रभाव नहीं पड़ता है)। इसके अतिरिक्त, top: 10px जैसी घोषणा का अर्थ यह है कि उस तत्व के शीर्ष से उस दूरी से बहुत दूरी है।

position: relative के रूप में तत्व घोषित करना top: 10px का अर्थ है 'वर्तमान स्थिति से शीर्ष से तत्व 10px को स्थानांतरित करें'। अन्य तत्वों के साथ ओवरलैप करने के सापेक्ष घोषित तत्वों के लिए यह संभव है, हालांकि आपको याद रखना चाहिए कि मूल स्थिति अभी भी अन्य तत्वों की व्यवस्था निर्धारित करती है।

मुझे आशा है कि यह आपके प्रश्न का उत्तर देगा।

Answer 2

आप एक स्थिति निर्धारित करने का भी प्रयास कर सकते हैं: रिश्तेदार; कंटेनर, जो बैनर बनाता है (# बैनर स्थिति: रिश्तेदार; और आईएमजी स्थिति: पूर्ण) फिर पूर्ण स्थिति को नीचे सेट करें: 0, इसे कंटेनर के नीचे संरेखित करें। यदि यह पूरा पृष्ठ है, तो बस कंटेनर की चौड़ाई और ऊंचाई को 100% पर सेट करें, और शरीर पर या div पर अतिरिक्त पैडिंग/मार्जिन हटा दें।