CSS:绝对定位的div扩展超出overflow:hidden? [英] CSS: Absolute positioned div extending beyond overflow:hidden?
问题描述
我有一个jquery产品滑块,通过浮动左边的几个LI旋转。它们的宽度为150像素,高度为200像素,其中有一个图像和一些文本。保存UL的外部容器div具有溢出:隐藏,使得一次只显示5个LI。
I have a jquery product slider that rotates through several LI's that are floated left. They have a width of 150px and height of 200px and have an image and a few bits of text in them. The outer container div that holds the UL has an overflow:hidden so that only 5 LI's are displayed at a time.
这很好,直到我尝试并粘贴一个额外的图像,绝对位置碰到上面几个像素和左侧的包含LI。
This works great, until I try and stick an additional image in there with an absolute position bumped a few pixels above and to the left of the containing LI.
目标是在项目的左上角有一个透明的已售出角落横幅png图像,它有一个阴影和高亮,使它看起来像它绕着LI的两侧弯曲。
The goal is to have a transparent "sold" corner banner png image on the top left corner of the item, and it has a shadow and highlight that makes it look like it's bending around the sides of the LI.
它看起来不错,除了溢出:隐藏似乎是切断那些几个额外的像素我已经碰到了。我甚至尝试添加额外的margin和padding在LI周围,但它仍然被截断了某种方式。
It looks great, except the overflow:hidden seems to be cutting off those few extra pixels I have bumped it out. I even tried adding extra margin and padding around the LI but it still gets cut off somehow.
这是我的代码:
<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 -->
p>
And the 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;
}
这里是sold图片的链接: http://bit.ly/h5Uozo ...
And here is the link to the "sold" image: http://bit.ly/h5Uozo ...
我没有写这个代码,只是修改它,但它一直给我FITS试图找出如何让小Sold图像扩展超出了LI盒-3px,使它看起来像是包装框。所以如果有人可以帮助我,我会非常感激它!非常感谢!
I didn't write this code, only am modifying it, but it's been giving me FITS trying to figure out how to get the little Sold image to extend beyond the LI box -3px so that it looks like it's "wrapping" around the box. So if someone could help me out I'd greatly appreciate it! Thanks so much!!
推荐答案
如何?
a href =http://jsfiddle.net/Mutant_Tractor/EGsad/ =nofollow> http://jsfiddle.net/Mutant_Tractor/EGsad/
http://jsfiddle.net/Mutant_Tractor/EGsad/
我添加了以下CSS:
.sold {
z-index: 999;
clear: both;
position: absolute;
margin-left: -10px;
margin-top: -5px;
}
这篇关于CSS:绝对定位的div扩展超出overflow:hidden?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!