位置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/