Html CSS - 在图像内定位按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11229483/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - position button inside image
提问by Kevin
I have div that contains an image, I need to place a button inside the image to around the top right corner of the image, when I do this
我有一个包含图像的 div，当我这样做时，我需要在图像内放置一个按钮到图像的右上角
#button_id{
position: relative;
left: 270px;
top: 30px;
}
What this is doing is making the button image be placed somewhere else, it moves the image left to the right and down, but the now the button is click-able in bar from where it was originally placed to the far right of the div. When I try this
这样做是将按钮图像放置在其他位置，它将图像向左向右和向下移动，但现在按钮可以在栏中单击，从它最初放置在 div 的最右侧的位置开始。当我尝试这个时
#button_id{
position: relative;
float: right; padding: 0px -40px -15px;
}
it moves the button to the right but it won't move it down.
它将按钮向右移动，但不会向下移动。
Note: the button is inside the div, without the css it is placed on top of the image in the center
注意：按钮在 div 内，没有 css，它位于中心图像的顶部
回答by Nick
You should give the div containing the image a position:relativeand your button that is contained within that div a position:absolute. That will position the button relative to the container div.
您应该给包含图像的 div aposition:relative和包含在该 div 中的按钮 a position:absolute。这将相对于容器 div 定位按钮。
回答by Shawn Lehner
If you don't have an specific reason to be using an img tag for this I would use a div structure like this:
如果您没有为此使用 img 标签的特定原因，我将使用这样的 div 结构：
<div id="my_image">
<button id="button_id" />
</div>
To get the button to position correctly you are going to want to set the div position to "relative" and the button position to "absolute". This means the absolute position of the button will be based on the top left of the wrapping div.
要使按钮正确定位，您需要将 div 位置设置为“相对”，将按钮位置设置为“绝对”。这意味着按钮的绝对位置将基于环绕 div 的左上角。
An example of this css would be:
这个 css 的一个例子是：
#my_image { position: relative; }
#button_id { position: absolute; right: 5px; top: 5px; }
The above CSS will put your button in the top right with 5px of space between it and the corner of the div.
上面的 CSS 会将你的按钮放在右上角，它和 div 的角之间有 5px 的空间。
回答by Daniel Adenew
Take a look this example below: an image with previous and next button over it.
看看下面的这个例子：上面有上一个和下一个按钮的图像。
<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===========================================
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======================= Ask and i will be discussed how you work with the next and previous thing.despite that this is a working example.
JScript====================== 询问，我将讨论您如何处理下一个和上一个事物。尽管这是一个工作示例。
