Positioning a DIV on a specific element?

[aw111]

I would like to be able to position a DIV (or SPAN, etc) on a specific element (by ID) or a specific anchor tag by name.
For example, how would I position it on a span which has the following code:
<span id="Bill">
Or alternately, position it at an anchor tag with a specific ID.
Thank you for any help.

[Major_Payne]

Use the CSS position property. There are several, but you might use the absolute positioning one:

#Bill {
width: XXpx;
height: YYpx;
position: absolute;
left: xxpx;
top: yypx;
}

You have:

top | right

top | left

bottom | right

bottom | left

Then there is the use of margin properties.

Ron

[aw111]

But how do I position a different element at the same location if I don't know the exact coordinates - e.g., if the target element is positioned automatically by the browser rather than being placed with absolute positioning? So if "Bill" is at coordinates X,Y, and I want to position a DIV at the same location, how do I obtain the coordinates for "Bill" ?

[milosevic]

You can't with CSS. (at least not yet)

This sort of thing is achieved with JavaScript. JQuery has built in functions for returning the position of elements. Then you pass this returned data to the absolute postion x/y values for the div to me moved to the same place.

Though I have no idea of the situation, you might find it a lot easier to generate a new element (again with JS) which is a child of the one where you want it to appear, rather than trying to move something around the page.

[alias]

So, the DIV you want to position is using position absolute?

In that case you can use a workaround like that:

<div id="one">1</div><div id="two">2</div>
<style>
#one { position: absolute; }
</style>

That will position the #one above the #two.

That is not very flexible, but it is the simplest solution if you don't want to use fixed positions or javascript.