CSS：オーバーフローを超えて拡張された絶対配置div：hidden？

Question

私はjquery製品のスライダを左に浮かべていくつかのLIのを介して回転している。幅150px、高さ200pxで、イメージとテキストが数ビットあります。 ULを保持する外側のコンテナdivにはoverflow：hiddenがあり、一度に5つのLIしか表示されません。

これは、そこに余分な画像を貼り付け、絶対位置が含まれているLIの上と下に数ピクセル上がってしまうまでうまくいきます。

目標は、アイテムの左上隅に透明な「売れた」コーナーバナー画像を持たせることです。また、LIの側面の周りに曲がるように見える影とハイライトがあります。

オーバーフロー以外は素晴らしいように見えます。隠された数個の余分なピクセルをカットしているように見えます。私はLIの周りに余分なマージンとパディングを追加しようとしましたが、それでも何とかしなくなってしまいました。ここで

は私のコードです：

<div class="shadowblock_out"> 
<div class="shadowblockdir"> 
    <h2>Products</h2> 
    <div class="sliderblockdir"> 
     <div id="list"> 
      <div class="slider"> 
       <ul> 
        <li><div class="sold_90"><img src="sold_90.png" /></div>  
        <div class="featured-image"><a href="#"><img width="150" height="125" src="851441-150x125.png" /></a></div> 
        <div class="featured-info">Product info here</div> 
        <span class="left">$50</span> 
        <span class="right">XYZ</span> 
        </li> 

        <li>  
        <div class="featured-image"><a href="#"><img width="150" height="125" src="827361-150x125.png" /></a></div> 
        <div class="featured-info">Product info here</div> 
        <span class="left">$25</span> 
        <span class="right">XYZ</span> 
        </li> 

        <li>  
        <div class="featured-image"><a href="#"><img width="150" height="125" src="837216-150x125.png" /></a></div> 
        <div class="featured-info">Product info here</div> 
        <span class="left">$55</span> 
        <span class="right">XYZ</span> 
        </li> 

        <li>  
        <div class="featured-image"><a href="#"><img width="150" height="125" src="940651-150x125.png" /></a></div> 
        <div class="featured-info">Product info here</div> 
        <span class="left">$75</span> 
        <span class="right">XYZ</span> 
        </li> 

        <li>  
        <div class="featured-image"><a href="#"><img width="150" height="125" src="848712-150x125.png" /></a></div> 
        <div class="featured-info">Product info here</div> 
        <span class="left">$90</span> 
        <span class="right">XYZ</span> 
        </li> 

        <li>  
        <div class="featured-image"><a href="#"><img width="150" height="125" src="903776-150x125.png" /></a></div> 
        <div class="featured-info">Product info here</div> 
        <span class="left">$10</span> 
        <span class="right">XYZ</span> 
        </li> 

        <li>  
        <div class="featured-image"><a href="#"><img width="150" height="125" src="278773-150x125.png" /></a></div> 
        <div class="featured-info">Product info here</div> 
        <span class="left">$100</span> 
        <span class="right">XYZ</span> 
        </li> 
       </ul> 
      </div><!-- /slider --> 
     </div><!-- /list --> 

     <div class="clr"></div> 
    </div><!-- /sliderblock --> 
</div><!-- /shadowblock --> 

とCSS：

.sold_90 { 
     display:block; 
     width:90px; 
     height:90px; 
     position:absolute; 
     z-index:9; 
     left: -5px; 
     top: -5px; 
     overflow: visible; 
    } 


     .shadowblock_out { margin:0 0 20px 0; border:1px solid #F5CF5B; /* overflow:hidden; */} 

     .shadowblockdir { 
      height:245px; 
      padding:8px 5px 5px; 
      background:#FFFFFD; 
      border:1px solid #fff; 
     } 
     /* featured listings homepage carousel */ 
     .featured-listings-home-top { 
      font-size: 16px; 
      color: #8E633E; 
      border-bottom-width: 1px; 
      border-bottom-style: dotted; 
      border-bottom-color: #A48061; 
      font-size: 16px; 
      font-style: italic; 
      color: #8E633E; 
      font-weight: bold; 
      margin: 0; 
      padding: 0; 
      padding-bottom: 5px; 
     } 
     .featured-listings-home-top span { 
      font-size: 12px; 
      color: #8E633E; 
      font-weight: normal; 
     } 
     .sliderblockdir { 
      height: 215px; 
      padding-top: 5px; 
     } 

     .slider { 
      float:left; 
      left:-5000px; 
      margin-left:15px; 
      position:relative; /* visibility:hidden; */ 
      height: 215px; 
      overflow: hidden; 
     } 
     .slider ul { 
      width:600px; 
      overflow: hidden; 
     } 
     .slider ul li a {text-decoration:none; font-size: 12px; font-family: Georgia, "Times New Roman", Times, serif; line-height: 12px; margin-top: 5px;} 
     .slider ul li a:hover {text-decoration:underline;} 
     .slider ul li:hover { background-color:#FDE051;} 
     .slider ul li img { 

     } 
     span.price_sm { font-size:11px; font-style:italic; color:#666} 
     span.feat_left { float:left; text-align:center; width:55px; } 
     #list { 
      width:925px; 
      margin:0 auto; 
      height: 215px; 
     } 
     .slider { 
      margin: 0 auto; 
      position: relative; 
      left: 5px; 
      width: 925px; 
     } 
     .slider ul { 
      height:210px; 
      width: 100%; 
     } 
     .slider ul li { 
      width:160px; 
      position: relative; 
      float: left; 
      padding-right: 5px; 
      padding-bottom: 0px; 
      padding-left: 5px; 
      margin-right: 10px; 
      text-align: center; 
      background-color: #FFFFFD; 
      -moz-box-shadow: 1px 1px 5px #b7b7b7; 
      -webkit-box-shadow: 1px 1px 5px #b7b7b7; 
      box-shadow: 1px 1px 5px #b7b7b7; 
      -khtml-border-radius: 3px; 
      -moz-border-radius: 3px; 
      -webkit-border-radius: 3px; 
      border-radius: 3px; 
      height: 200px; 
      margin-left: 5px; 
      margin-top: 5px; 
      overflow: visible; 
     } 
     .slider ul li a {text-decoration:none; font-size: 12px; font-family: Georgia, "Times New Roman", Times, serif; line-height: 12px; margin-top: 5px;} 
     .slider ul li a:hover {text-decoration:underline;} 
     .slider ul li:hover { background-color:#FDE051;} 
     .slider ul li img { 
      cursor:pointer; 
      margin: 0 auto; 
      position: relative; 
      text-align: center; 
     } 
     span.price_sm { font-size:11px; font-style:italic; color:#666} 
     span.feat_left { float:left; text-align:center; width:55px; } 
     #list li p { 
      display:block; 
      white-space: pre-wrap; /* Mozilla, since 1999 */ 
      white-space: -pre-wrap; /* Opera 4-6 */ 
      white-space: -o-pre-wrap; /* Internet Explorer 5.5+ */ 
      text-align: center; 
      width: 50px; 
     } 
     .captify { border:1px solid #CCC; float:left; margin:3px 10px 5px 0; padding:2px;} 
     .prev { cursor:pointer; float:left; padding-top:25px} 
     .next { cursor:pointer; float:right; padding-top:25px} 
     .featured_price {float:left; font-size: 10px; color:#FF0000; display: inline; width: 55px;} 
     .featured_location {font-size: 10px; color:#000; float: right;display: inline;} 
     .left { 
      float: left; 
      width: 100px; 
      font-size: 12px; 
      font-family: Georgia, "Times New Roman", Times, serif; 
      color: #AD6441; 
      font-weight: bold; 
     } 
     .right { 
      float: right; 
      width: 50px; 
      font-family: Georgia, "Times New Roman", Times, serif; 
     } 

     .featured-image img { 
      -moz-box-shadow: 1px 1px 5px #b7b7b7; 
      -webkit-box-shadow: 1px 1px 5px #b7b7b7; 
      box-shadow: 1px 1px 5px #b7b7b7; 
      -khtml-border-radius: 3px; 
      -moz-border-radius: 3px; 
      -webkit-border-radius: 3px; 

     } 
     .featured-image { 
      height: 125px; 
      margin-top: 10px; 
      padding: 2px; 
     } 
     .featured-info { 
      font-size: 11px; 
      color: #3F2A19; 
      font-weight: bold; 
      font-family: Georgia, "Times New Roman", Times, serif; 
      line-height: 14px; 
     } 

そしてここでは、 "販売" の画像へのリンクです：http://bit.ly/h5Uozo ...

私はこのコードを書いていませんでしたが、それを修正していますが、それは私にFITSがどのようにo箱の周りに「ラッピング」のように見えるように、少し売れた画像をLIボックスを超えて-3pxまで広げる。だから誰かが私を助けることができたら、私はそれを大いに感謝します！本当にありがとう！！

Answer 1

どのようにですか？

http://jsfiddle.net/Mutant_Tractor/EGsad/

私は、次のCSSを追加しました：私は `div.sold`のスタイルを参照してくださいいけない

.sold { 
    z-index: 999; 
    clear: both; 
    position: absolute; 
    margin-left: -10px; 
    margin-top: -5px; 
}