DIVの右上に近い画像を表示する

Question

divの右上に小さな十字（クローズ）画像を表示する方法を知りたかったのです。 CSSとXHTMLの使用。おかげ

Answer 1

あなたはそれをこのように行うことができます：jsfiddle.net/7JEAZ/1317

コードスニペット：インケースその任意のヘルプ、こっちに閉じるボタンを持つ別の例である

#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>

Answer 2

DIVの右上隅にあるコードは、2つの異なるサイズのdivで表示され、クリックされた画像の親divを閉じるjQueryを示す例です。 divを再表示するリンクもあります。

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：

<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：

$(".close-image").click(function() { 
    $(this).parent().hide(); 
}); 

$("#toggle-content").click(function() { 
    $("#content").slideToggle(); 
}); 

例：click here

Answer 3

この簡単な例が役立ちます。 =]

HTML

<div class="thumbnail"> 
    <img src="http://96pix.com/images/renee-v.jpg" /> 
    <a href="#" id="close"></a> 
</div> 

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; 
} 

例：あなたがこれまでに試してみました何 http://jsfiddle.net/PPN7Q/26/