Cómo hacer que una imagen cercana aparezca en la esquina superior derecha de un DIV

Question

Quería saber cómo hacer que aparezca una imagen pequeña (cerrada) en la parte superior derecha dentro de un div. Usando CSS y XHTML. Gracias

Answer 1

Se podía hacerlo de esta manera: jsfiddle.net/7JEAZ/1317

Código fragmento:

#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

En caso su ayuda, aquí es otro ejemplo con el botón de cierre sobre el esquina superior derecha del DIV, el código es un ejemplo que lo muestra con dos divs de diferentes tamaños y jQuery para cerrar el div principal de la imagen en la que se hizo clic. También hay un enlace para volver a mostrar el 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(); 
}); 

Un ejemplo: click here

Answer 3

este sencillo ejemplo puede ayudar. =]

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

Ejemplo: http://jsfiddle.net/PPN7Q/26/