homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Positioning a DIV on a specific element?

Msg#: 4197280 posted 7:35 pm on Sep 6, 2010 (gmt 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.



Msg#: 4197280 posted 9:12 pm on Sep 6, 2010 (gmt 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.



Msg#: 4197280 posted 9:48 am on Sep 7, 2010 (gmt 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" ?


5+ Year Member

Msg#: 4197280 posted 2:36 pm on Sep 7, 2010 (gmt 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.


10+ Year Member

Msg#: 4197280 posted 4:18 pm on Sep 7, 2010 (gmt 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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved