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內的絕對位置無法正常工作

回答

相關問題