position fixed images within div (pins on map)

Question

I have a "map" div with the css rules height: 400px; width: 800px; background: url(map.png). This div has a background image of a world map. I have some images that act as "pins" that I want to place on the map in specific areas. What CSS properties would I give the image to be able to, for example, place them within the "map" div by specific top/left pixel coordinates of the "map" div? I am able to position them relative to the entire body but not to the specific div.

Solution 1

Put position: relative on the map div, then put position: absolute on the pins. Using :

left: 10px;
top: 10px;
position: absolute;

on the pins, while they are contained by the map div, which has position relative, would put the pins in the top left corner. I hope this is clear enough...

Solution 2

The easiest thing to do is put them inside the map div, give #map { position: relative; } and then give the pins position: absolute; with top and left properties (probably what you're already doing).

If it's impossible to put the pins in the map itself, you can do the same thing with a container div:

<div id="map-wrapper">
    <div id="map">...</div>
    <!-- pins -->
</div>

Either way, the point is that absolute positioning is relative to the nearest parent that has position: relative; That's the body by default, but you can give the property to any other element you want.

Solution 3

You can do this by using position: absolute. It will position itself relative to the first relative positioned parent. So make sure the map element in which the pins are created is set to position: relative. Example:

#map {
  position: relative;
}

#pin_a {
  position: absolute;
  top: 25px;
  left: 10px;
}

You can use top, bottom, right, left.

Solution 4

You need to set position: relative; on the map. This will not affect the map div positioning but will establish a containing block for its children. With this done you will be able to position the market with position:absolute; and left/right. Their position will be computed from relative to the top,left corner of the map div.

See here for a full reference on containing blocks and positioning: http://www.w3.org/TR/CSS2/visudet.html#containing-block-details

View more solutions