jQuery 使接近图像出现在 DIV 的右上角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5088643/
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
Making A Close Image Appear On Top Right Corner Of A DIV
提问by Hirvesh
I wanted to know how to make a small cross (close) image appear on the top right inside of a div. Using CSS and XHTML. Thanks
我想知道如何在 div 的右上角显示一个小的十字（关闭）图像。使用 CSS 和 XHTML。谢谢
回答by stecb
You could do it this way: jsfiddle.net/7JEAZ/1317
你可以这样做：jsfiddle.net/7JEAZ/1317
Code snippet:
代码片段：
#panel{
width:100px;
height:100px;
background:red;
}
#close{
display:block;
float:right;
width:30px;
height:29px;
background:url(https://web.archive.org/web/20110126035650/http://digitalsbykobke.com/images/close.png) no-repeat center center;
}<div id="panel"><a id="close" href="#"></a></div>回答by Scoobler
In-case its any help, here is another example with the close button over the top right corner of the DIV, the code is an example showing it with two different sized div's and the jQuery to close the parent div of the image clicked. There is also a link to reshow the div.
万一它有任何帮助，这里是另一个示例，关闭按钮位于 DIV 的右上角，代码是一个示例，显示它具有两个不同大小的 div 和用于关闭单击图像的父 div 的 jQuery。还有一个链接可以重新显示 div。
CSS:
CSS：
#content{
border: solid black;
width: 70%;
}
#info{
border: solid red;
width: 50%;
}
.close-image{
display: block;
float:right;
position:relative;
top:-10px;
right: -10px;
height: 20px;
}
HTML:
HTML：
<a href="#" id="toggle-content">Show / Hide content</a>
<br/><br/>
<div id="content">
<img class="close-image" src="http://residentialsearch.savills.co.uk/Content/Images/icon_close.png" />
<b><u>Content:</u></b><br/>
This is the info inside the div!
</div>
<br/><br/>
<div id="info">
<img class="close-image" src="http://residentialsearch.savills.co.uk/Content/Images/icon_close.png" />
<b><u>Info:</u></b><br/>
Click the close button to hide this info!
</div>
jQuery:
jQuery：
$(".close-image").click(function() {
$(this).parent().hide();
});
$("#toggle-content").click(function() {
$("#content").slideToggle();
});
An example: click here
一个例子：点击这里
回答by user2282896
this simple example may help. =]
这个简单的例子可能会有所帮助。=]
HTML
HTML
<div class="thumbnail">
<img src="http://96pix.com/images/renee-v.jpg" />
<a href="#" id="close"></a>
</div>
CSS
CSS
.thumbnail {
position: relative;
width:300px;
height:300px;
}
.thumbnail img {
width:100%;
height:100%;
}
#close {
display: block;
position: absolute;
width:30px;
height:30px;
top: 2px;
right: 2px;
background: url(http://icons.iconarchive.com/icons/kyo-tux/delikate/512/Close-icon.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
Example: http://jsfiddle.net/PPN7Q/26/
