CODEWITHSUNDEEP
htmlcss
Ali_dotNet
Ali_dotNet

Reputation: 3279

position objects in exact places in div

I'm working on an ASP.NET web app, I'm going to display some small icons on a div having an image as background. Div acts as a map and my small icons (images) are something like pins. These images have style="position:relative; left:X, top:Y", I want them to be positioned in specific locations on the div, but they are not places exactly where I want, I think they affect on each other, how can I place them in my exact places?

Upvotes: 0

Views: 502

Answers (3)

Math chiller
Math chiller

Reputation: 4167

use position:absolute; on the "pins" and position:relative; on the container div.

another method is to make one big div with the background as the img that you want, then fill it with smaller divs, and place the "pins" in those divs.

Upvotes: 1

Smeegs
Smeegs

Reputation: 9224

relative position adjusts it from it's original position. So, setting left moves it that many pixels from it's original position, same with top.

You want to use absolute.

Upvotes: 1

Curtis
Curtis

Reputation: 103378

Use position:absolute on the pins, and position:relative on the map.

Demo: http://jsfiddle.net/qdFeb/

Upvotes: 3

Related Questions