अपने कंटेनर के बाहर एक छवि को

Question

मेरे पास एक प्रमुख सिरदर्द है जो एक div के भीतर मौजूद है जो इसके तत्व के बाहर तैरने के लिए प्रकट होता है।

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

वांछित (निर्दिष्ट) डिज़ाइन looks like this। आप देख सकते हैं कि एक ग्लोब आइकन है जो शीर्षक की गोलाकार कोने पृष्ठभूमि से ऊपर है। इस स्थिति में यह पृष्ठ के बाएं और दाएं (जो आप आंशिक स्क्रीन शॉट में भी देख सकते हैं) पर अन्य सामग्री ब्लॉक के शीर्ष मार्जिन के ऊपर स्थित है।

परिणाम मैं वर्तमान में looks like this प्राप्त करने में सक्षम हूं। जैसा कि आप देख सकते हैं, यदि आप किसी छवि को अपने परिभाषित मार्जिन से परे रखने की कोशिश करते हैं, तो यह जो भी ओवरलैप हो जाएगा, वह 'नीचे स्लाइड' करेगा।

मैंने पूर्ण स्थिति, फ़्लोटिंग और दिमाग में आने वाली किसी और चीज की कोशिश की है। मैं <h1> तत्व के मार्जिन से बाध्य हूं, जिसे आप पहले स्क्रीन शॉट में अंतिम कुछ अक्षर देख सकते हैं।

अनुरोध पर उपलब्ध कोड/सीएसएस। बड़ी चॉकलेट मछली जो भी मुझे बताती है कि यह वास्तव में हासिल किया जा सकता है और कैसे।

कोड के टुकड़े: एचटीएमएल

.icon 
 
    { 
 
     background: transparent none no-repeat scroll 0 -0.2em; 
 
     padding: 1.8em 0 1em 4em; 
 
    } 
 
    
 
    .icon-globe 
 
    { 
 
     background-image: url('images/icons/globe.gif'); 
 
    } 
 
    
 
    /* **************** GRIDS ***************** */ 
 
    .line, .last-column 
 
    { 
 
     overflow: hidden; 
 
     _overflow:visible; 
 
     _zoom:1; 
 
    } 
 
    
 
    .column 
 
    { 
 
     float:left; 
 
     _zoom:1; 
 
    } 
 
    
 
    .col-fullwidth {float:none;} 
 
    .col-halfwidth {width:50%;} 
 
    .col-onethird {width:33%;} 
 
    
 
    .col-last 
 
    { 
 
     float:none; 
 
     _position:relative; 
 
     _left:-3px; 
 
     _margin-right: -3px; 
 
     overflow: hidden; 
 
     width:auto; 
 
    } 
 

 
    .padded-sides 
 
    { 
 
     padding: 0 1em; 
 
    } 
 

 
    .section-heading 
 
    { 
 
     background: transparent url('images/type/section-head.gif') no-repeat top right; 
 
     position: relative; 
 
     margin-left: 1.4em; 
 
    } 
 
    
 
    .section-heading-cap 
 
    { 
 
     background: transparent url('images/type/section-head-cap.gif') no-repeat top left; 
 
     padding: 0.4em 1em 1.6em; 
 
     margin: 0 0 0 -1em; 
 
    }

<h1>Contact Us</h1> 
 
    
 
    <div class="line"> 
 
    
 
     <div class="column col-threequarters"> 
 
     
 
      <div class="line"> 
 
      
 
       <div class="column col-threefifths contact-panel-top"> 
 
          
 
        Unrelated stuff...      
 
       
 
       </div> 
 
      
 
      </div> 
 
      
 
      <div class="column col-last padded-sides"> 
 
      
 
       <div class="section-heading"> 
 
        <h4 class="section-heading-cap"><img src="/App_Themes/Common/images/icons/globe.gif" alt="International" />International Contacts</h4> 
 
       </div> 
 
       
 
       ... and so on.

Answer 1

कैसे छवि के सापेक्ष स्थिति करने के बारे में?

position: relative; 
top: -Xpx; 
z-index: 99; 

कहाँ -X लेकिन है कि यह यह DIV से बाहर झांक सकते करने के लिए ले जाता है।

यदि यह काम नहीं करता है तो मेरे पास कुछ अन्य विचार हैं, लेकिन मैं निश्चित रूप से अपना HTML देखना चाहता हूं ताकि मैं आसानी से फ़ायरबग पर इसके साथ खेल सकूं।

संपादित: एचटीएमएल आप पोस्ट वास्तव में पर्याप्त नहीं है, कोड देख के पूरे मुद्दे के रूप में एक प्रति आप आसानी से Firebug और इस तरह के पर साथ सामान की कोशिश कर सकते है करने के लिए सक्षम होने के लिए है। हालांकि, मैं यहां पर पूरे पृष्ठ को पोस्ट करने में आपकी हिचकिचाहट/अक्षमता को समझता हूं। किसी भी तरह, मैं छवि दिखाने के लिए <span> का उपयोग नहीं करता, मैं बस एक वास्तविक छवि का उपयोग करता हूं। It worked fine for me।

Answer 2

नकारात्मक शीर्ष मार्जिन का उपयोग करके कभी-कभी आपके HTML पर निर्भर करता है।

Answer 3

.icon 
{ 
    margin-top:-24px; /*icon height/2*/ 
} 

Answer 4

कारण अपनी छवि को काट रही है क्योंकि माता पिता तत्वों में से एक "कॉल-पिछले" के वर्ग है, जो अतिप्रवाह "छिपा" पर सेट है संदर्भित कर रहा है है। आपका पृष्ठ ब्राउज़र को छवि को काटने के लिए कह रहा है।

यदि आप उस अतिप्रवाह विशेषता को हटा सकते हैं, या इसे "दृश्यमान" में संशोधित कर सकते हैं, तो यह छवि को ओवरफ़्लो करने की अनुमति देगा।

यदि छवि अभी भी काट रही है, क्योंकि क्लास "सेक्शन-हेडिंग" वर्ग का उपयोग करने वाला मूल तत्व अपेक्षाकृत स्थित है, तो आप छवि को एक पूर्ण स्थिति रखने के लिए सेट कर सकते हैं, जिससे छवि को भी इस तरह प्रदर्शित करने की अनुमति मिल जाएगी (लेकिन मुझे नहीं लगता कि जब तक छवि "छुपा" का अतिप्रवाह हो तब तक काम करेगी।छवि के लिए

उदाहरण सीएसएस:

.section-heading .section-heading-cap img 
{ 
    position:absolute; 
    bottom:0px; 
    left:0px; 
} 

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

Answer 5

पैरेंट (युक्त) तत्व पर overflow:visible आज़माएं।