My webpage has a large image (a map). I want to position, at the top right of the image, a small icon that is for closing the map.

How can I figure out the position and place the image appropriately?

The image has a fixed width of 900 x 600.

I have jquery on the page if that helps.

I tried using $("#map").position and I have the top and left, but not sure how to position to the top right.

My webpage has a large image (a map). I want to position, at the top right of the image, a small icon that is for closing the map.

How can I figure out the position and place the image appropriately?

The image has a fixed width of 900 x 600.

I have jquery on the page if that helps.

I tried using $("#map").position and I have the top and left, but not sure how to position to the top right.

• javascript
• jquery
• css

2 Answers 2

The easiest way would just to positon the close button absolutely with CSS instead of calculating the positon with JS. For example:

<div id="map" style="position: relative;">
  <img src="yourmap.png">
  <img src="close.png" style="position: absolute; top: 0; right: 0;">
</div>

You could also take a look at the latest jQuery-UI bits. They have some facilities for positioning elements relative to other elements on the page. Depending on what browsers your wanting to support this could be simpler than creating the browser-agnostic CSS.