Relative Positioning

[Guest_imported]

Greetings,
I am a web developer in need of some help with div's and relative positioning! Here's the situation:
I have an image of my auditorium and an image of an arrow. I need to place the arrow in a position relative to the auditorium image (as well as on top of it) such that the top left-hand corner of the auditorium image is the (0, 0) "origin." Anyone know how I could do this? My website is at pac.trifecta.com--another problem is that the top left-hand corner of the browser window isn't where this will be, it's actually in a frame centered in the middle of the page. Anyone have any ideas? Thanks,

Brian

 

[RISTMO]

Ok. It seems like the best and easiest way to do that is to position them both ABSOLUTELY with a z-index. Try this:

<img src=&quot;auditorium.jpg&quot; width=&quot;200&quot; height=&quot;150&quot; style=&quot;position:absolute;left:100px;top:200px;z-index:0;&quot;>

<img src=&quot;arrow.jpg&quot; width=&quot;35&quot; height=&quot;20&quot; style=&quot;position:absolute;left:100px;top:200px;z-index:1;&quot;>

Here's how z-indexing works:

style=&quot;z-index:1;&quot;
the # can be any number you want, the higher the number, the higher the positioning of the object.
I'm not exactly sure about this, but if you have two objects, each one with different z-index values, I'm pretty sure that the higher number will load first.


Here's how positioning absolutely and relatively work.

Absolutely:

style=&quot;position:absolute;left:100px;top:200px;&quot;
inside of a tag to position absolutely.
When you say left:100px you're telling it to move the left side of it 100px to the right of the left side of the page.
If you said right:100px you'd tell it to move the right side of it 100px from the right side of the page.
When you say top:100px you're telling it to move the top side of it 100px down from the top of the page.
If you said bottom:100px you'd tell it to move the bottom side of it 100px higher than the bottom of the page.

-----------------------------------------------------------

Relative:

You put
style=&quot;position:relative;left:100px;top:200px;&quot;
inside of a tag to position relatively.
When you say left:100px you're telling it to move the left side of it 100px to the right.
If you said right:100px you'd be telling it to move the left side of it 100px farther to the left.
When you say top:100px you're telling it to move the top side of it 100px towards the bottom of the page.
When you say bottom:100px you're telling it to move the top side of it 100px to higher.

With both of these, things can be positioned off the page. and by putting style=&quot;overflow-x:hidden;&quot; you can stop people from scrolling to see it(it's like it's not even there).

Rick If I have helped you just click the first link below to let me know