CSS/Javascript show image remove x on mouseover/hover

Tags: html,css,positioning

Problem :

I would like to have a picture like:

I'd like it displayed in the top right corner of each of my images, 5px from the right and top of the image. I have the functions for showing and hiding the x as well as removing the appropriate elements, but I'm very bad with CSS positioning and I don't know how to get it to show in the top right corner.

code so far: http://jsfiddle.net/eetwL/

---

Solution :

This should be a piece of cake! You can position that element absolute, which means that it'll not flow with the layout but will instead get its position based off that of it's nearest relative parent. Let's pretend you have that "x" in an anchor, like this:

<div class="container">
    <a class="close" href="#">x</a>
</div>

You would want to make sure that there's a relative parent somewhere. This will be the starting point from which your top and right CSS rules will be applied. To make the anchor 5px from the top right of the container...

div.container {
    position: relative;
    // possibly important to set width, height, etc.
}

a.close {
    // set size, background image, etc.
    display: block;
    position: absolute;
    top: 5px;
    right: 5px;
}