CSS: Абсолютный позиционированный div, выходящий за пределы переполнения: скрытый?

Question

У меня есть слайдер продукта jquery, который вращается через несколько LI, которые плавают влево. Они имеют ширину 150 пикселей и высоту 200 пикселей и имеют изображение и несколько бит текста в них. Внешний контейнер контейнера, содержащий UL, имеет переполнение: скрытое, так что одновременно отображаются только 5 LI.

Это отлично работает, пока я не попытаюсь вставить дополнительное изображение там, где абсолютная позиция набросилась на несколько пикселей выше и слева от содержащего LI.

Цель состоит в том, чтобы иметь прозрачный «проданный» угол баннерного изображения png в верхнем левом углу элемента, и у него есть тень и подсветка, что делает его похожим на его изгиб по сторонам 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, пытаясь выяснить, как t o получите маленькое Проданное изображение, выходящее за пределы поля LI -3px, чтобы оно выглядело как «обертывание» вокруг окна. Поэтому, если кто-то может мне помочь, я бы очень признателен! Спасибо!!

Answer 1

Как это?

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

Я добавил следующий CSS:

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