div滚动div内的绝对位置无法正常工作

我有一个框显示使用jquery选择的文件的内容。为箱体的代码是div滚动div内的绝对位置无法正常工作

<div class="lightbox"> 
<div class="lightbox-content"></div> 
<div id="close-lightbox">Close</div> 
</div>

我想近距离灯箱div来在box.So的底部总是在CSS它是

#close-lightbox{color:red;position:absolute;bottom:0;padding-left:30%;}

事业部lightbox有overflow:auto。现在，发生的是，如果lightbox-content不是很大，并且它适合固定大小的lightbox那么没有滚动，并且close-ligthbox的确出现在我想要的底部。但是，如果lightbox-content很大，并且不适合固定大小的灯箱，那么会出现滚动，但close-lightbox出现在灯箱底部，向下滚动，这意味着它出现在lightbox-content的中间。

任何建议如何解决这个问题？

来源

2012-07-08 takis

任何示例，你可以告诉我们吗？无论是在jsFiddle或网站本身？ – 2012-07-08 17:33:07

您是否尝试设置'.lightbox {position：relative;}'？这样'close-lightbox' div将相对于主容器，并且它总是在底部（使用您发布的CSS） – tftd 2012-07-08 17:56:15

请检查http://jsfiddle.net/takis/2CtTh/。关闭不会出现在最后。 – takis 2012-07-08 18:09:57

你可以在自己的包装器中包装灯箱，并相对于它定位关闭灯箱。

HTML

<div class="lightbox-wrapper"> 
    <div class="lightbox"> 
     <div class="lightbox-content"></div> 
     <div id="close-lightbox">Close</div> 
    </div> 
</div>

CSS

.lightbox-wrapper { 
    position: relative; 
} 

#close-lightbox { 
    position: absolute; 
    bottom: 5px; 
    left: 30%; 
}

看看这个小提琴 - http://jsfiddle.net/joplomacedo/4chu6/

编辑 Ohgodwhy的解决方案实际上是清洁，如果你能收藏的overflow:auto移到灯箱 - 内容 - >当我在它的时候，我提出了他的解决方案 - http://jsfiddle.net/joplomacedo/4chu6/2/

来源

2012-07-08 17:34:55 banzomaikaka

这种方式关闭 - 灯箱总是出现。我希望在关闭后显示。 – takis 2012-07-08 18:08:44

.lightbox{ 
    height:auto; 
    overflow:hidden; 
} 

.lightbox-content{ 
    height:270px; 
    overflow:auto; 
}

这一变化基于您的收藏夹需求的高度。

来源

2012-07-08 17:36:32 Ohgodwhy

我试过了，但是如果文字很大就没有滚动 – takis 2012-07-08 17:54:17

@Takis是什么？我需要看一个例子，这是没有意义的。 – Ohgodwhy 2012-07-08 18:04:32

检查http://jsfiddle.net/takis/2CtTh/。关闭灯箱不会出现在结尾 – takis 2012-07-08 18:24:30

div滚动div内的绝对位置无法正常工作

回答

相关问题