Posizionare un'immagine al di fuori del suo contenitore

Question

Ho un forte mal di testa nel tentativo di ottenere un'immagine contenuta in un div in modo che appaia fuori dal suo elemento contenitore.

Mentre sono abbastanza sicuro che questo non è possibile, voglio essere sicuro di aver esaurito tutte le strade prima di dire a designer e clienti che non lo faranno apparire esattamente come delineato nel specifiche di progettazione

Il design desiderato (specificato) looks like this. Puoi vedere che c'è un'icona a forma di globo che fa capolino sullo sfondo dell'angolo arrotondato dell'intestazione. Questa posizione si trova anche sopra il margine superiore degli altri blocchi di contenuti all'estrema sinistra e alla destra della pagina (che puoi vedere anche nella schermata parziale).

Il risultato sono attualmente in grado di raggiungere looks like this. Come puoi vedere, se provi a posizionare un'immagine al di là dei suoi margini definiti, essa 'scivolerà sotto' qualsiasi cosa si sovrapponga.

Ho provato il posizionamento assoluto, il floating e tutto ciò che mi viene in mente. Sono limitato dai margini dell'elemento <h1>, che puoi vedere con le ultime lettere della prima schermata.

Codice/CSS disponibili su richiesta. Grande pesce al cioccolato a chi mi dice che questo in realtà può essere raggiunto e come.

frammenti di codice HTML:

.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

ne dite di fare il posizionamento relativo all'immagine?

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

Dove -X è comunque molto più che serve per arrivare a sbirciare fuori dalla DIV.

Se ciò non funziona ho alcune altre idee, ma mi piacerebbe sicuramente vedere il tuo HTML così posso giocarci facilmente con Firebug.

EDIT: L'html che hai postato non è veramente sufficiente, poiché l'intero punto di vista del codice è di poter avere una copia che puoi facilmente provare con Firebug e così via. Capisco la tua esitazione/impossibilità di pubblicare l'intera pagina qui, comunque. Ad ogni modo, non userei un <span> per mostrare l'immagine, vorrei solo usare un'immagine reale. It worked fine for me.

Answer 2

utilizzando un margine superiore negativo a volte può funzionare, a seconda del codice HTML.

Answer 3

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

Answer 4

La ragione per la vostra immagine è sempre tagliato fuori è perché uno degli elementi padre fa riferimento alla classe dei "col-ultima", che ha troppo pieno impostato su "nascosto". La tua pagina sta dicendo al browser di tagliare l'immagine.

Se è possibile rimuovere l'attributo di overflow o modificarlo in "visibile", questo consentirà l'overflow dell'immagine.

Se l'immagine è STILL troncata, poiché l'elemento genitore che utilizza la "intestazione di sezione" della classe è relativamente posizionato, è possibile impostare l'immagine in modo da avere una posizione assoluta, che consentirà all'immagine di visualizzarla in quel modo (ma non penso che funzionerà finché l'immagine avrà un overflow di "nascosto".

Esempio css per l'immagine:

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

Tuttavia, se lo fai, il testo si posizionerà sotto l'immagine. Dovresti impostare il padding o il margine sul lato sinistro del tag h4 in modo appropriato per reinserirlo nuovamente nella vista.

Answer 5

Provare overflow:visible sull'elemento padre (contenente).