我有一个 jquery 产品 slider ，它在几个向左浮动的 LI 之间旋转。它们的宽度为 150 像素，高度为 200 像素，其中包含一张图片和一些文本。保存 UL 的外部容器 div 有一个 overflow:hidden 以便一次只显示 5 个 LI。
这很好用，直到我尝试在其中粘贴一个附加图像，其绝对位置在包含 LI 的上方和左侧碰撞几个像素。
目标是在元素的左上角有一个透明的“已售出” Angular 标 png 图像，它有一个阴影和高光，使它看起来像在 LI 的两侧 flex 。
它看起来很棒，除了 overflow:hidden 似乎切断了我已经将其剔除的那些额外像素。我什至尝试在 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 之外，这样它看起来就像是“包装”箱子周围。因此，如果有人可以帮助我，我将不胜感激!非常感谢!!
最佳答案
这是怎么回事？
http://jsfiddle.net/Mutant_Tractor/EGsad/
我添加了以下 CSS:
.sold {
z-index: 999;
clear: both;
position: absolute;
margin-left: -10px;
margin-top: -5px;
}
关于CSS:超出溢出的绝对定位div:隐藏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4963708/