は、私はこのチュートリアルに従ってきた

Question

オーバーフローとdivタグの内容外では表示できませんし、それが正常に動作します： http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

私の問題は、私はオーバーフローと、行のすべてを3 divタグを持っているということですが-yが設定されます。画像を表示するために何らかのテキストにカーソルを合わせると、画像はdivタグ内でオーバーフローでしか見ることができません。それは、divの幅（高さではない）の外にあるフルサイズに及ぶ必要があります。イメージがdivタグの外側に表示される方法はありますか？

おかげでここ

OK Dは、それがコードからのみ抜粋ですが、メイクシフトコードサンプルです。私がしようとしているのは、価格設定を上に置いて、divタグの外にコンテンツを表示することです。

<table class="itemOverFlow" border="1px"> 
    <tr> 
     <td width="600px">other stuff here</td> 
     <td> 
      <div id="miniShoppingCart" class="itemOverFlow"> 
       <h4>White Chocolate & Peanut Butter</h4> 
       <br />1 X Box of 16 Squares at 14.95<br /> <a 
        href="shoppingItem.php?id=45 ">View Item</a><br /> <a 
        class="thumbnailLeft" href="#thumb">Pricing<span> 
         <div class="options"> 
          <h3>Purchase options</h3> 
          <form class="addToCartForm" method="post" action="addToCart.php"> 
           <input type="hidden" name="returningPage" 
            value="/ShoppingCart/categoryDisplay.php" /> 
           <table class="options"> 
            <tr> 
             <th>Selection</th> 
             <th>Price</th> 
             <th>Quantity</th> 
             <th></th> 
            </tr> 
            <input type="hidden" name="itemId" value="45" /> 
            <tr> 
             <td>Box of 16 Squares,</td> 
             <td>14.95</td> 
             </td> 
             <input type="hidden" name="0_id" value="0" /> 
             <input type="hidden" name="0_idObj" 
              value="676862cef66431c20584f6f4b9d7a743" /> 
             <td><select name="0_qty"><option value="1" selected>1</option> 
               <option value="2">2</option> 
               <option value="3">3</option> 
               <option value="4">4</option> 
               <option value="5">5</option> 
               <option value="6">6</option> 
               <option value="7">7</option> 
               <option value="8">8</option> 
               <option value="9">9</option> 
             </select> 
             </td> 
             <td><input type="submit" name="0_addToCart" 
              value="Change \ Add new"> 

             </td> 
            </tr> 
           </table> 
          </form> 

         </div> </span> </a> 
      </div> 
      <hr /></td> 
    </tr> 
</table> 

CSS

<style type="text/css"> 
div.itemOverFlow { 
border: 1pt solid blue; 
height: 500px; 
overflow: auto; 
padding: 20px;} 
.thumbnailLeft { 
position: relative; 
z-index: 0;} 
a.thumbnailLeft { 
color: blue; 
text-decoration: underline;} 
.thumbnailLeft:hover { 
background-color: transparent; 
z-index: 50;} 
.thumbnailLeft span { 
position: absolute; 
background-color: lightyellow; 
padding: 5px; 
left: -1000px; 
border: 1px dashed gray; 
visibility: hidden; 
color: black; 
text-decoration: none;} 
.thumbnailLeft span img { 
border-width: 0; 
padding: 2px;} 
.thumbnailLeft:hover span { 
visibility: visible; 
top: 0; 
left: -400px; 
width: 450px; 
height: 350px;} 
</style> 

Answer 1

a { 
    position: relative; 
} 
a img { 
    display: none; 
} 
a:hover img { 
    position: absolute; 
    display: block; 
    z-index: 1; 
    left: 0; 
    top: 1.2em; 
} 

このオーバーフロー領域外のコンテンツを表示する方法がありません。 htmlはこれ以外のすべてのデータをクリップします。 w3schools.com/jsref/prop_style_overflow.asp

Answer 2

私は、これはあなたのオーバーフローの設定を行うには何も持っていないと思います。

ホバーのテキストを基準に画像を絶対的に配置するだけです（this fiddle exampleなど）。

CSS：