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.

Kreitman

Answer 1

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

Obstructionist

$("#mydiv").css({top: '200px', left: '200px', position:'absolute'}); <-- good $("#mydiv").css({top: '200', left: '200', position:'absolute'}); <-- bad. Apparently, if position values are strings, you must include the units, or it'll have no effect. – Flunkey

That note about having a relative positioned parent saved me a lot of frustration. Thank you. – Ways

Answer 2

$("#mydiv").css('top', 200);

$("#mydiv").css('left', 200);

Crabstick

Answer 3

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.

Eminence

Beware that the method IS NOT position() from jQuery but position() from jQuery UI, that is a SETTER. api.jqueryui.com/position – Television

@AdrianoG.V.Esposito, how to define right and bottom offset – Tacky

Answer 4

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

Jecon

Answer 5

Code offset dynamic for dynamic page

var pos=$('#send').offset().top;
$('#loading').offset({ top : pos-220});

Anorthic

Answer 6

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.

Sophist

Answer 7

Use offset() function of jQuery. Here it would be:

$container.offset({
        'left': 100,
        'top': mouse.y - ( event_state.mouse_y - event_state.container_top ) 
    });

Reata