Umieszczanie obrazu poza jego kontenerem

Question

Mam poważne bóle głowy, próbując uzyskać obraz zawarty w elementach div, który wydaje się unosić poza jego elementem zawierającym.

Chociaż jestem pewien, że to po prostu niemożliwe, chcę mieć pewność, że wyczerpałem wszystkie możliwości, zanim powiem projektantowi i klientowi, że nie zamierzają sprawić, by wyglądało dokładnie tak, jak to opisano w specyfikacja projektu

Żądany (określony) konstrukcja looks like this. Widać, że znajduje się ikona globu, która zagląda ponad zaokrąglone tło rogu nagłówka. Pozycja ta znajduje się również nad górnym marginesem innych bloków zawartości po lewej i prawej stronie strony (co widać również na częściowym zrzucie ekranu).

Wynik jestem obecnie w stanie osiągnąć looks like this. Jak widać, jeśli spróbujesz umieścić obraz poza zdefiniowanymi marginesami, "przesunie się", niezależnie od tego, co się nakłada.

Próbowałem bezwzględnego pozycjonowania, unoszenia się i czegokolwiek innego, co przychodzi mi do głowy. Ograniczają mnie marginesy elementu <h1>, na którym widać kilka ostatnich liter pierwszego zrzutu ekranu.

Kod/CSS dostępny na życzenie. Duża czekoladowa ryba dla tego, kto powie mi, że można to faktycznie osiągnąć i jak.

Fragmenty kodu: 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

Jak o zrobieniu względne pozycjonowanie na obrazie?

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

Gdzie -X jest jednak wiele trzeba, aby zmusić go do wglądu z DIV.

Jeśli to nie zadziała mam kilka innych pomysłów, ale na pewno bym chciał zobaczyć kod HTML, więc mogę bawić się z nim na Firebug łatwo.

EDIT: HTML, opublikowanego naprawdę nie wystarczy, jako całego punktu patrząc na kod to, aby móc mieć kopię można łatwo wypróbować na rzeczy z Firebug i takie. Rozumiem jednak wasze wahanie/niemożność opublikowania całej strony tutaj. W każdym razie, nie użyłbym <span> do pokazania obrazu, użyłbym tylko rzeczywistego obrazu. It worked fine for me.

Answer 2

używanie ujemnego marginesu górnego może czasami działać, w zależności od HTML.

Answer 3

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

Answer 4

Powodem obraz jest coraz odcięty, ponieważ jest jednym z elementów dominujących odwołuje klasę „Col-ostatni”, która ma przepełnienie ustawiony na „ukryty”. Twoja strona informuje przeglądarkę, aby obcięła obraz.

Jeśli można usunąć ten atrybut przepełnienia lub zmodyfikować go do „widoczny”, pozwoli to obraz do przepełnienia.

Jeśli obraz jest NAPIĘCIE odcinany, ponieważ element nadrzędny używający "nagłówka sekcji" klasy jest względnie ustawiony, można ustawić obraz tak, aby miał pozycję absolutną, co pozwoli obrazowi również wyświetlać w ten sposób (ale nie sądzę, że to będzie działać tak długo, jak długo obraz będzie miał "ukryty".

Przykład css dla obrazka:

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

Jednak jeśli to zrobisz, tekst będzie pozycjonować się pod obrazem. Musiałbyś odpowiednio ustawić dopełnienie lub margines po lewej stronie znacznika h4, aby ponownie go wyświetlić.

Answer 5

Wypróbuj overflow:visible na elemencie nadrzędnym (zawierającym).