/    Sign up×
Community /Pin to ProfileBookmark

convert absolute to relative position

Copy linkTweet thisAlerts:
Dec 06.2007

Hi,

Is there any way I can get the position of a div (specified as position:absolute) relative to its parentNode.

My requirement is that i need to move a div tag inside one main div tag. The inner div tag has its style specified as position:absolute;. Hence when i try to restrict the movement of the inner div within the boundaries of the outer div, it is not happening so. There is a difference of 15px between the left=0px of inner and left=0px in case of outer div tags. do i have a method where i can get this difference from some attributes or formulae???

Thanks in advance.

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@holidayDec 06.2007 — what if you just found the position of the parent
Copy linkTweet thisAlerts:
@magentaplacentaDec 06.2007 — Not sure I totally understand, but you might want to look into the offsetLeft, offsetTop and offsetParent properties.
Copy linkTweet thisAlerts:
@remiauthorDec 07.2007 — The offsetLeft of the main div is 0px. However if i move the child div to the exact same position such that the boundaries are displayed one above the other, then the value of offsetLeft of the child div(position:absolute) is being displayed as 15px.

I'll try the offsetParent property.
Copy linkTweet thisAlerts:
@remiauthorDec 07.2007 — I tried even the offsetParent property.

for the inner DIV, the offserParent is directly the BODY tag rather than the outer DIV.
Copy linkTweet thisAlerts:
@holidayDec 07.2007 — use a javascript to find the absolute position of the object you want to act as the parent, then find the absolute position of the object you want to be the child, then use javascript to not allow the child to pass the boundaries of the parent.
×

Success!

Help @remi spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.7,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...