In jQuery how can I set "top,left" properties of an element with position values relative to the parent and not the document?

jquery css jquery-selectors positioning css-position
Max picture Max · Oct 5, 2012 · Viewed 380.2k times · Source

.offset([coordinates]) method set the coordinates of an element but only relative to the document. Then how can I set coordinates of an element but relative to the parent?

I found that .position() method get only "top,left" values relative to the parent, but it doesn't set any values.

I tried with 

$("#mydiv").css({top: 200, left: 200});

but does not work.

Answer

Champ picture Champ · Oct 5, 2012

To set the position relative to the parent you need to set the position:relative of parent and position:absolute of the element 

$("#mydiv").parent().css({position: 'relative'});
$("#mydiv").css({top: 200, left: 200, position:'absolute'});

This works because position: absolute; positions relatively to the closest positioned parent (i.e., the closest parent with any position property other than the default static).

Related questions

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

Is there any way to select/manipulate CSS pseudo-elements such as ::before and ::after (and the old version with one semi-colon) using jQuery? For example, my stylesheet has the following rule: .span::after{ content:'foo' } How can I change 'foo' …

Read More
Access the css ":after" selector with jQuery

I have the following css: .pageMenu .active::after { content: ''; margin-top: -6px; display: inline-block; width: 0px; height: 0px; border-top: 14px solid white; border-left: 14px solid transparent; border-bottom: 14px solid white; position: absolute; right: 0; } I'd like to change the border-width …

Read More
Changing the child element's CSS when the parent is hovered

First of all, I'm assuming this is too complex for CSS3, but if there's a solution in there somewhere, I'd love to go with that instead. The HTML is pretty straightforward. <div class="parent"> <div class="child"&…

Read More