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）上设置position：relative，然后删除子节点上的float并在子div（.pull-down-button）上将位置从relative更改为absolute。另请注意，您需要为正确的属性指定单位：

.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/

将div定位到隐藏溢出的可见容器的底部

2 个答案: