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

Question

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

User · Accepted Answer

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).

User · Answer

I found that if the value passed is a string type  it must be followed by  px   i e  90px   where if the value is an integer  it will append the px automatically   the width and height properties are more forgiving  either type works    var x    90   var y    120    selector  css    left  x  top  y              doesn t work   selector  css    left  x    px   top  y    px               does work  x   90  y   120    selector  css    left  x  top  y              does work

User · Answer

Code offset dynamic for dynamic page  var pos     send   offset   top      loading   offset   top   pos-220

User · Answer

You could try jQuery UI s  position method       mydiv   position     of      mydiv   parent      my   left 200 top 200     at   left top        Check the working demo

User · Answer

Use offset   function of jQuery  Here it would be    container offset            left   100           top   mouse y -   event state mouse y - event state container top

User · Answer

mydiv   css  top   200        mydiv   css  left   200

User · Answer

Refreshing my memory on setting position  I m coming to this so late I don t know if anyone else will see it  but --  I don t like setting position using css    though often it s fine  I think the best bet is to use jQuery UI s position   setter as noted by xdazz  However if jQuery UI is  for some reason  not an option  yet jQuery is   I prefer this   const leftOffset   200  const topOffset   200  let  div       mydiv    let baseOffset    div offsetParent   offset     div offset     left  baseOffset left   leftOffset    top  baseOffset top   topOffset       This has the advantage of not arbitrarily setting  div s parent to relative positioning  what if  div s parent was  itself  absolute positioned inside something else    I think the only major edge case is if  div doesn t have any offsetParent  not sure if it would return document  null  or something else entirely   offsetParent has been available since jQuery 1 2 6  sometime in 2008  so this technique works now and when the original question was asked

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

Examples related to jquery

Examples related to css

Examples related to jquery-selectors

Examples related to positioning

Examples related to css-position