Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Positioning a DIV on a specific element?

7:35 pm on Sep 6, 2010 (gmt 0)

New User

5+ Year Member

joined:Sept 6, 2010
votes: 0

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.
9:12 pm on Sept 6, 2010 (gmt 0)

Full Member

joined:July 31, 2005
votes: 0

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.

9:48 am on Sept 7, 2010 (gmt 0)

New User

5+ Year Member

joined:Sept 6, 2010
votes: 0

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" ?
2:36 pm on Sept 7, 2010 (gmt 0)

Full Member

5+ Year Member

joined:Dec 30, 2009
votes: 0

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.
4:18 pm on Sept 7, 2010 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 5, 2004
votes: 0

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>
#one { position: absolute; }

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.

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members