Relative Position (css)

[khalilov 0]

I am making a coordinate system

p.map{ position:absolute;left:20%;top:20%;width:70%;height:70%;background-image: url(grass.jpg); 	background-repeat: repeat; }

An object(another image) appears in a certain position depending on GET vars

<p class="map"><?php$x=$_GET['x'];$y=$_GET['y'];$x*=74;$y*=57;echo "<div style='position:absolute;top:".$y."px;left:".$x."px;'><img src='file:\\C:\wamp\www\Game\pic\mark.jpg'></div>";?></p>

The position of the pic comes outside the map, whats the code so that that style coordination is relative to map, meaning 0px,0px are at top left of map box.

[pyost 0]

When using absolute positioning (what you used for p.map), you are giving an element the exact position where it should be, relative to the whole page. If you, however, want to position an element relative to another element, the latter has to have position:relative as an attribute.

 

So, in your case, p.map would have position:relative (unfortunately, you would have to deal with positioning that element differently, I think), and the rest would stay the same.

[khalilov 0]

I set the positioning to relative on both map and div, its different now. However the 0,0 are not at the top left of map box, i a had to

$x+=210;$y-=270;

So that they are almost at the begining. Where is 0px,0px of map?

[Quatrux 4]

I don't want to be wrong, but for example 0,0 will be in a position you are currently using top left, for example you are in the middle of a page and before you, you've got lots of elements, so 0,0 will be the currently most left position you can get and it's not like you always are linking to the top left of the page, you're linking to the top left of the current element and when you're using -1 or -20 coordinates, you overflow, I mean you get outside that element in the direction you're using.. I think it works like that

 

here is some source for it, also it has a testing tool, try it yourself tools:

 

http://forums.xisto.com/no_longer_exists/

Edited December 13, 2008 by Quatrux (see edit history)

[pyost 0]

I set the positioning to relative on both map and div, its different now. However the 0,0 are not at the top left of map box, i a had to

$x+=210;$y-=270;

So that they are almost at the begining. Where is 0px,0px of map?

p.map should use relative, and the div should use absolute. When you use top:0; left:0, the top left corner of the div will be placed in the top left corner of the map - that's how it should work. If it isn't, then something else is the problem. Try posting the whole code

[khalilov 0]

It didn't work =), but this did:

<link rel="stylesheet" type="text/css" href="map.css" /><p class="map"><?php$x=$_GET['x'];$y=$_GET['y'];$x*=74;$y*=57;echo "<img style='position:relative;top:".$y."px;left:".$x."px;'src='file:\\C:\wamp\www\Game\pic\mark.jpg'>";?></p>

Turns out the <div></div> were messing things up. By putting the image directly inside <map> tags its 0,0 were set to top left of map. Then by using relative positioning it works. Thanks guys, especially for the relative position thing, didn't know it =). Alot of recoding to do O.o