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.
views:
42answers:
4The 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.
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.
Hi,
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
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...