divで画像を上に移動するには？

Question

私は半複雑なウェブサイトを持っていて、<div>の束の中にはめ込まれた画像ですが、私はその画像をxピクセルの数だけ移動する必要があります。オーバーフローが隠されているので、画像が下部（期待どおり）にカットされますが、100％を維持したままの幅で画像を移動することはできません。ここで

はコード

#DIV_8 { 
    cursor: pointer; 
    border-style: solid; 
    border-width: 1px; 
    height: 200px; 
    margin-left: 10px; 
    margin-right: 10px; 
    margin-bottom: 10px; 
    width: 300px; 

    overflow: hidden; 
} 

#DIV_9 { 
    max-height: 250px; 
    width: 100%; 
    height: auto; 
    display: inline-block; 
    vertical-align: bottom; 
    max-width: 100%; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Answer 1

添加することによって動作するように思われる：top調整

#DIV_9 { 
    position: relative; 
    top: -20px; 
} 

は、上下の画像を移動させます。

https://jsfiddle.net/y197yjp2/

Answer 2

のjsfiddleこれはあなたが探しているものはありますか？

#DIV_8 { 
 
    position: relative; 
 
    cursor: pointer; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    height: 200px; 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
    margin-bottom: 10px; 
 
    width: 300px; 
 
    overflow: hidden; 
 
} 
 
#DIV_9 { 
 
    position: absolute; 
 
    bottom: -20px; 
 
    width: 100%; 
 
    height: auto; 
 
    display: inline-block; 
 
    max-width: 100%; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
#DIV_9 img { 
 
    width: 100%; 
 
}

<div id="DIV_1"> 
 
    <div id="DIV_2"> 
 
    <div id="DIV_3"> 
 
     <div id="DIV_4"> 
 
     <div id="DIV_5"> 
 
      <div id="DIV_6"> 
 
      <div id="DIV_7"> 
 
       <div id="DIV_8"> 
 
       <div id="DIV_9"> 
 
        <img src="http://img11.deviantart.net/a412/i/2012/145/9/9/google_chrome_by_juniorgustabo-d513nlo.png" width="360" height="308" alt="brazil" id="IMG_10" /> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 

 
    </div>

Answer 3

ただネガティブマージントップ

#DIV_8 { 
    cursor: pointer; 
    border-style: solid; 
    border-width: 1px; 
    height: 200px; 
    margin-left: 10px; 
    margin-right: 10px; 
    margin-bottom: 10px; 
    width: 300px; 

    overflow: hidden; 
} 

#DIV_9 { 
    max-height: 250px; 
    width: 100%; 
    height: auto; 
    display: inline-block; 
    vertical-align: bottom; 
    max-width: 100%; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    margin-top: -20px; 
}