コンテナの外側に画像を配置する

Question

div内に含まれる画像を取得しようとすると頭が痛いので、その要素の外側に浮いているように見えます。

私はこのことができないと確信していますが、私はすべての道を尽くしてデザイナーとクライアントに伝えていないことを確かめたいと思います。設計仕様。

希望（指定）デザインlooks like this。あなたは、見出しの丸い角の背景の上に覗く地球のアイコンがあることがわかります。この位置には、ページの左端と右端にある他のコンテンツブロックの上端の上にも配置されています（これは部分的なスクリーンショットでも表示されます）。

私は現在looks like thisを達成することができます。ご覧のように、定義されたマージンを超えてイメージを配置しようとすると、イメージは重なり合っても「下にスライドします」。

私は、絶対的な位置付け、浮動小数点、その他のことを考えました。私は<h1>要素の余白に拘束されています。最初のスクリーンショットの最後の数文字を見ることができます。

リクエストに応じてコード/ CSSを入手できます。これが実際に達成され、どのように実現されるのかを誰にでも伝える大きなチョコレートの魚。

コードスニペット： 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

どのように画像に相対的な位置関係をやってはどうですか？ -Xしかしある

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

はずっとそれはDIVの外を覗くために取得するのにかかります。

これでうまくいかない場合は、私はいくつかのアイデアを持っていますが、あなたのHTMLを見て、Firebugで簡単に遊びます。

EDIT：あなたが投稿したHTMLは実際には十分ではありません。コードを見ていると、Firebugなどで簡単に試してみることができます。私はあなたの躊躇/ここにページ全体を投稿することができないことを理解しています。とにかく、私は画像を表示するために<span>を使用しないだろう、私はちょうど実際の画像を使用します。 It worked fine for me。

Answer 2

HTMLによっては、上端が負の値を使用することがあります。

Answer 3

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

Answer 4

親要素の1つは、「COL-最後」、「非表示」に設定し、オーバーフローを持っているのクラスを参照しているので、あなたのイメージが切り取らなっている理由があります。あなたのページは画像をカットオフするようにブラウザに指示しています。

オーバーフロー属性を削除するか、「visible」に変更すると、イメージがオーバーフローする可能性があります。

"セクションヘッディング"クラスを使用している親要素が相対的に配置されているため、画像が静止している場合は、画像を絶対位置に設定することもできます。しかし、私はイメージが "隠された"のオーバーフローを持っている限り、それが動作するとは思わない。画像について

例のCSS：あなたはそれを行う場合

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

ただし、テキストが画像の下に自分自身を配置します。 h4タグの左側に余白または余白を適切に設定して、再び表示に戻す必要があります。

Answer 5

親（含有）要素にoverflow:visibleを試してください。