Html CSS 在图像的右上角定位一个图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25562962/
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 Positioning an icon at the top right side of the image
提问by Norman
I'm trying to position a closeicon from bootstraps sprite, in the top right side of the image ( not the box). I took this from a working example, but it wont work for me. It always ends up outside the box and at the right corner of the screen.
我正在尝试将close引导精灵中的图标放置在图像的右上角（不是框）。我从一个工作示例中获取了这个，但它对我不起作用。它总是在框外和屏幕的右上角结束。
How can I get this right? I've setup a fiddle, but could not figure how to get the sprite in there. Can you help?
我怎样才能做到这一点？我已经设置了一个小提琴，但无法弄清楚如何在那里获得精灵。你能帮我吗？
<!DOCTYPE HTML>
<html>
<head>
<link media="screen" type="text/css" href="icons.css" rel="stylesheet">
<title>Delete Image Icon Dev</title>
<style>
img.thumbnail {
background: none repeat scroll 0 0 #FFFFFF;
}
.image:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.image {
-moz-box-sizing: border-box;
border: 1px solid #DDDDDD;
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
float: left;
height: 150px;
margin-bottom: 10px;
padding: 10px;
}
.image img {
vertical-align: middle;
}
.delete {
position:absolute;
top:0;
right:0;
}
</style>
</head>
<body>
<div class="image"><img class="thumbnail" src="http://i.imgur.com/dsPfaSjs.jpg"><i class="icon-remove blue delete"></i></div>
</body>
</html>
采纳答案by misterManSam
This example can take an image of any height.
这个例子可以拍摄任何高度的图像。
Turn the
<i class="delete">into a<div>Wrap the
<img>with the new delete divGive
.image:beforeamin-height: 150px;and removethe fixed height on.imageApply
position: relativeto.deleteApply the delete button to a pseudo elment with
.delete:afteror place another<i>to make it interactive.
转
<i class="delete">成<div><img>用新的删除 div包裹给
.image:beforeamin-height: 150px;并删除固定高度.image适用
position: relative于.delete将删除按钮应用到带有
.delete:after或放置另一个伪元素<i>以使其具有交互性。
Example without the delete pseudo element
HTML
HTML
<div class="image">
<div class="icon-remove blue delete">
<img class="thumbnail" src="http://i.imgur.com/dsPfaSjs.jpg">
<!-- <i class="delete-button"></i> if you need to use a real element -->
</div>
</div>
CSS
CSS
.image:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
min-height: 150px;
}
.image {
-moz-box-sizing: border-box;
border: 1px solid #DDDDDD;
float: left;
margin-bottom: 10px;
padding: 10px;
}
.delete {
position: relative;
vertical-align: middle;
display: inline-block;
}
.delete:after {
content: '';
position:absolute;
top:0;
right:0;
height: 20px;
width: 20px;
background: #F00;
}
/* If you need to use a real element remove .delete:after and use this --
.delete .delete-button {
content: '';
position:absolute;
top:0;
right:0;
height: 20px;
width: 20px;
background: #F00;
}*/
回答by Liam Kenneth
Hi I created a fork of your fiddle and I have solved it. http://jsfiddle.net/bkx1dnsb/1/
嗨，我为你的小提琴创建了一个叉子，我已经解决了它。http://jsfiddle.net/bkx1dnsb/1/
You needed Position:relative on the image class
你需要 Position:relative on the image class
There was no icon so i added an X but your icon will be in the same spot.
没有图标，所以我添加了一个 X，但您的图标将在同一位置。
Use the top & right from the delete class to tinker the positioning.
使用删除类的顶部和右侧来修补定位。
The reason it was going to the top right was because position absolute is relative to the browser window. Unless you set position releative on the parent of the absolute positioned element.
它位于右上角的原因是绝对位置是相对于浏览器窗口的。除非您在绝对定位元素的父级上设置相对位置。
Hope that helps
希望有帮助
回答by grow
/e
/e
you need to update your markup:
你需要更新你的标记：
<div class="image">
<div class="img">
<img class="thumbnail" src="http://i.imgur.com/dsPfaSjs.jpg" />
<i class="icon-remove blue delete"></i>
</div>
</div>
and also your css:
还有你的css：
img.thumbnail {
background: none repeat scroll 0 0 #FFFFFF;
}
.image:before {
content:"";
display: inline-block;
vertical-align: middle;
}
.image {
-moz-box-sizing: border-box;
border: 1px solid #DDDDDD;
float: left;
height: 150px;
margin-bottom: 10px;
padding: 10px;
vertical-align: middle;
}
.image .img {
display: block;
vertical-align: middle;
position: relative;
}
.delete {
position:absolute;
top:0;
right:0;
width: 10px;
height: 10px;
background: red;
}
Example: http://jsfiddle.net/eugbrqwc/17/
示例：http: //jsfiddle.net/eugbrqwc/17/
you don't need the height, width and background in .delete - just for showing purposes
您不需要 .delete 中的高度、宽度和背景 - 仅用于显示目的
回答by Tasos K.
You need to set position:relative;to the .imagediv and then set the topand rightparameters to the .deleteelement.
您需要设置position:relative;为.imagediv，然后将top和right参数设置为.delete元素。
.image {
/* Other rules here */
position:relative;
}
.delete {
/* Other rules here */
position:absolute;
top:30px;
right:15px;
}
Here is a jsfiddle also: http://jsfiddle.net/eugbrqwc/15/. I added some text to the .deleteelement just to make it visible.
这里还有一个 jsfiddle：http: //jsfiddle.net/eugbrqwc/15/。我向.delete元素添加了一些文本只是为了使其可见。
回答by flowstoneknight
Add a wrapper <div>around your image and icon, set it to display: inline-blockand position: relative. Its size will conform to the image's, while allowing the icon to absolutely position itself to the top right.
<div>在您的图像和图标周围添加一个包装器，将其设置为display: inline-block和position: relative。它的大小将符合图像的大小，同时允许图标绝对定位在右上角。
