CSS 如何在图像的一个角的图像“上”添加按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11684675/
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
How to add a button "on" the image at one corner of image?
提问by user1425472
I want to place buttons On the Top of the imagein three places
我想在图像顶部的三个位置放置按钮
- Bottom Left Corner of the image
- Bottom Right corner of the image
- Center of the image. (optional)....
- 图片左下角
- 图片右下角
- 图像的中心。（可选的）....
How to place these button on the top of the image.
如何将这些按钮放置在图像的顶部。
<img src="images/default_image.png" style="width:90%" id="mImage" />
回答by Anders Arpi
This has nothing to do with jQuery or jQuery mobile really. Can be done with simple HTML and CSS. See this fiddle for am example on how I would do it: http://jsfiddle.net/rHaPH/22/
这实际上与 jQuery 或 jQuery mobile 无关。可以用简单的 HTML 和 CSS 来完成。请参阅此小提琴作为我将如何做的示例：http: //jsfiddle.net/rHaPH/22/
回答by Dessus
Try this:
尝试这个：
<div id="div-1">
<img src="../img/logo.png" style="width:90%" id="mImage">
<div id="div-1a" data-role="fieldcontain">
<a href="index.html" data-role="button" data-icon="delete">Delete</a>
</div>
<div id="div-1b" data-role="fieldcontain">
<a href="index.html" data-role="button" data-icon="delete">Delete</a>
</div>
</div>
with this:
有了这个：
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
bottom:0;
left:0;
}
#div-1b {
position:absolute;
bottom:0;
right:0;
}
You can copy that into JS fiddle and it will work using JQMobile. Make sure you include the css url for JQM and make sure you tick JQMobile when adding JQuery to your JS fiddle.
您可以将其复制到 JS fiddle 中，它将使用 JQMobile 工作。确保包含 JQM 的 css url，并确保在将 JQuery 添加到 JS fiddle 时勾选 JQMobile。
Update:
更新：
You should also beware that JQMobile will inject span tags into the DOM which will be your buttons at runtime. This means the css I have provided is conceptually ok, but the selectors will need to point to those span tags (as opposed to using the ids of div tags).
您还应该注意 JQMobile 会将 span 标记注入到 DOM 中，这将是您在运行时的按钮。这意味着我提供的 css 在概念上是可以的，但是选择器需要指向那些 span 标签（而不是使用 div 标签的 id）。
回答by spuas
As today, with jQuery mobile v1.3.2 I have implemented that in the following way:
和今天一样，使用 jQuery mobile v1.3.2，我已经通过以下方式实现了它：
<div data-role="page">
<div data-role="content">
<div id="wrapper">
<div id="button">
<a href="#" data-role="button">Button</a>
</div>
<img src="i.jpg">
</div>
</div>
</div>
And with the follow css:
并使用以下 css：
#wrapper{ position:relative; }
#button{ position:absolute; top: 10px; left:0px; z-index:10; }
img{max-width:100%; }
Some styles probably are not needed for what you want, but I just took the code sample from my own code.
有些样式可能不是您想要的，但我只是从我自己的代码中获取了代码示例。
wrapper div is relative positioned so its contents can be absolutely positioned.
包装器 div 是相对定位的，因此它的内容可以绝对定位。
z-index in the button div is to make sure it is placed on top of image.
按钮 div 中的 z-index 是为了确保它位于图像的顶部。
You can add as many buttons as desired and change its css properties for top, left, right and button to move them around the image
您可以根据需要添加任意数量的按钮并更改其顶部、左侧、右侧和按钮的 css 属性以在图像周围移动它们
Working example at jsFiddle
jsFiddle 的工作示例
