我有一个jquery产品滑块，可以旋转几个向左浮动的LI。它们的宽度为150像素，高度为200像素，并且有一个图像和几个文本。保存UL的外部容器div具有溢出：隐藏，因此一次只显示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试图弄清楚如何让小的Sold图像延伸到LI盒子-3px以外它看起来像是“包裹”在盒子周围。所以，如果有人能帮助我，我会非常感激！非常感谢!!
答案 0 :(得分：2)
这是怎么回事？
http://jsfiddle.net/Mutant_Tractor/EGsad/
我添加了以下CSS：
.sold {
z-index: 999;
clear: both;
position: absolute;
margin-left: -10px;
margin-top: -5px;
}