CSS - 图像内的位置按钮

Question

我有包含图像的div，我需要在图像的右上角围绕图像放置一个按钮，当我这样做时

#button_id{
position: relative;
    left: 270px;
    top: 30px;
}

这样做是将按钮图像放在其他地方，它将图像向左和向下移动，但是现在按钮可以在条形图中点击，从最初放置到最右边的位置div。我试试这个时

#button_id{
     position: relative;
     float: right; padding: 0px -40px -15px;
}

它将按钮向右移动但不会向下移动。

注意：按钮位于div内部，没有css，它位于中心图像的顶部

Answer 1

您应该为包含图片的div position:relative以及该div中包含的按钮position:absolute。这将相对于容器div定位按钮。

Answer 2

如果您没有特定的理由为此使用img标签，我会使用这样的div结构：

<div id="my_image">
<button id="button_id" />
</div>

要使按钮正确定位，您需要将div位置设置为“relative”，将按钮位置设置为“absolute”。这意味着按钮的绝对位置将基于包装div的左上角。

这个css的一个例子是：

#my_image { position: relative; }
#button_id { position: absolute; right: 5px; top: 5px; }

上面的CSS会把你的按钮放在右上方，它与div的角落之间有5px的空间。

Answer 3

看看下面这个例子：上面有一个上一个和下一个按钮的图像。

 <div class="thumbnail rec thmbnail-large">
    <img class="img-thumbnail img-thumbnail-large-0 img-responsive" src="http://daniel-ethiopia.rhcloud.com/nivo/2.jpg" data-holder-rendered="true"  width="100%" style="margin-left:0px;height:auto;">
    <input type ="button" class="classic_button_next btn btn-primary btn-large" id="next_button" value="Next >>"/>
    <input type ="button" class="classic_button_prev btn btn-primary btn-large" id="prev_button" value="Previous <<"/>            
 </div>

CSS ===========================================

<style type="text/css">
.classic_button_next{ position: absolute; right: 5px; top: 5px; }
.classic_button_prev { position: absolute; right: 88px; top: 5px; }
<style>

的JScript ======================= 问我和我将讨论你如何处理下一个和以前的事情。尽管这是一个有效的例子。