Css 使div停留在容器中

我想在图像上放置一个按钮，但是如果图像的顶部有

<div class="item">
    <img src=""/><hr style="position: relative;top:-20px;"/>
    <div id="addgravity" style="position:relative;top:-300px;background:white;
    height:56px;color:white;opacity:0.9;"class="item">button</div>
</div>

按钮

使用负边距定位东西会给自己带来困难。为什么不把“按钮”绝对地放在中间，而不考虑图像的大小？< /P>

.item{
显示：内联块；
位置：相对位置；
}
#附加重力{
位置：绝对位置；
顶部：0；右侧：0；底部：0；左侧：0；
背景：白色；
高度：56px；
颜色：黑色；
不透明度：0.9；
保证金：自动；
}

按钮

为什么“addgravity”div需要出现在标记的底部？我真的不知道你在问什么。你的意思是如何显示3个垂直对齐的div，就像表格中的行一样？@draw container->image->id=“addgravity”。我想举一个例子，说明如果我添加style top-300px，图像的宽度如何从容器中取出id=“addgravity”，因为它不代表你的问题或你的评论。投票结束。请改进您对问题的描述。因此，请向我们显示您有图像和按钮的标记！