位置div隱藏溢出的可見容器底部

Question

我有一個包含圖像的div。這個想法是，用戶將能夠按下一個按鈕，div展開到一個特定的高度。所以我所做的是將容器的高度設置爲200px，而圖像的高度爲400px。我想在容器的右下角添加一個小按鈕。

問題是該按鈕出現在圖像下方。

所以我的問題是，我怎麼讓按鈕div堅持它的容器底部？

.visual { 
    padding: 0; 
    background: #EEEEEE; 
    height: 200px; 
    overflow: hidden; 
} 

.pull-down-button { 
    float:right; 
} 

.visual img {width: 100%} 

<div class="visual"> 
    <img src="http://placehold.it/800x400" /> 
    <div class="pull-down-button">some text</div> 
</div> 

這裏有一個小提琴： http://jsfiddle.net/n3zkov64/4/

Answer 1

您需要設置的位置是：相對於父DIV（.visual），然後從相對去除浮在兒童和改變位置，絕對的子div（.pull-down-button）。另外請注意，您需要爲正確的屬性來指定單位：

.visual { 
    padding: 0; 
    background: #EEEEEE; 
    height: 200px; 
    overflow: hidden; 
    position:relative; 
} 
.pull-down-button { 
    position:absolute; 
    bottom:0; 
    right:10px; 
} 
.visual img { 
    width: 100% 
} 

jsFiddle example

Answer 2

你的意思是像現在？

所以，我做了一些改動：

.pull-down-button { 
    position:absolute; 
    z-index: 10000; 
    bottom:0; 
    right:10; 
} 

http://jsfiddle.net/n3zkov64/6/