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

你应该得包含图像的position:relative和你的按钮是div包含在该格内position:absolute。这将相对于容器div定位按钮。

Answer 2

如果你没有一个具体的理由使用img标签为了这个，我会用一个div结构是这样的：

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

为了让按钮正确定位你会想将div位置设置为“相对”并将按钮位置设置为“绝对”。这意味着按钮的绝对位置将基于包装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 ======================= 问，我将讨论如何与下一个和以前的事情工作尽管这是一个工作的例子。