如何定位溢出div边缘（右下角）的图像？答案

【问题标题】：How to position a image overflowing the edge (right-bottom) of a div?如何定位溢出div边缘（右下角）的图像？
【发布时间】：2012-05-22 12:00:52
【问题描述】：

在 div 填充了未定义数量的文本后，有什么方法可以将图像定位在 div 的底部（溢出 div 边缘）？

图像应位于 div 内部的一半和 div 外部的一半 - 溢出边缘（如果你知道我的意思） - 我已经设法通过使用相对位置和静态布局来做到这一点（以像素为单位）。但是，当 div 高度是动态的 (height=auto;) 时，这不起作用。

我有一个这样的html结构：

<div class="container">
    <div class="box">
        <p>X amount of text</p>
    </div>
    <img class="button" src="../images/image.png"></img>
</div>

我的 CSS：

.button
{
    position:relative;
    right: 30px;
    #bottom:-103px;
    #bottom: 70%;
    z-index:1;
}

此外，当单击图像时，框会展开。这是通过以下代码完成的（并且效果很好）：

var boxHeight = $('.box').height();
var boxHeightOffset = 5 - boxHeight;
$('.button').css('bottom', boxHeightOffset + "px");

我尝试过使用 bottom: % 但这显然没有任何作用。我试图在视图加载时运行我的小 javascript 函数，但是我尝试实现它 - 我得到 height=0。

这个问题可能有点复杂，但我想知道是否有任何方法可以在正确的时间运行 javascript（在 div 加载时 - 不知何故）或编辑我的 css 使其更具动态性？

哦，我在 iOS 上使用 PhoneGap。（网络套件）

【问题讨论】：

标签： html css ios cordova position

【解决方案1】：

怎么样：

#container {
  position:relative;
}         

.button { 
  position:absolute;
  bottom:-20px;
  right:-20px;
}

如果这不起作用，那么使用负的右边距和下边距如何？

【讨论】：

你解决了它。谢谢！唯一的调整是底部：-20px；不工作。我不明白为什么。我将其更改为 margin-bottom:-20px;一切正常。我什至可以删除我的 JavaScript 代码！再次感谢。
感谢您抽出宝贵时间说声谢谢。我真的很高兴它成功了。