CSS - 将按钮定位在图像内部

Question

我有一个包含图片的div，我需要在图片内部放置一个按钮，将其放置在图片的右上角。当我这样做时，

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

这个操作是将按钮图片放置在其他地方，它向左和向下移动图像，但现在该按钮可以在原来放置的位置到div的最右侧进行点击。当我尝试这样做时

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

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

注意：按钮在div内部，没有css时，它放置在图像中心的上方。

- Kevin

Answer 1

您应该给包含图片的div添加position:relative属性，然后在这个div中包含的按钮上添加position:absolute属性。这将使按钮相对于容器div定位。

- Nick

Answer 2

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

 <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 ======================= 如果您想了解如何使用下一个和上一个功能，请提问。尽管这是一个工作示例。

- Nickromancer

Answer 3

如果您在这里没有特定的原因使用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的角落和它之间留有5个像素的空间。

- Shawn Lehner