How to move an entire div element up x pixels?

Question

I want to reposition an entire div and its contents up about 10-15 pixels.

How can I do this?

Note: this is slider element, so when I click a button the slider slides down. Once it is finished I want to reposition it up about 15 pixels.

You should mention whether or not it currently has any positioning CSS. That way you might be able to alter it (e.g. with javascript). — Eran Zimmerman Gonen, Aug 22 '11 at 19:33

score 64 · Accepted Answer · answered Aug 22 '11 at 19:40

64

$('#div_id').css({marginTop: '-=15px'});

This will alter the css for the element with the id "div_id"

To get the effect you want I recommend adding the code above to a callback function in your animation (that way the div will be moved up after the animation is complete):

$('#div_id').animate({...}, function () {
    $('#div_id').css({marginTop: '-=15px'});
});

And of course you could animate the change in margin like so:

$('#div_id').animate({marginTop: '-=15px'});

Here are the docs for .css() in jQuery: http://api.jquery.com/css/

And here are the docs for .animate() in jQuery: http://api.jquery.com/animate/

answered Aug 22 '11 at 19:40

Jasper

75,717
14
151
146

1

@Kira The `duration` argument can be passed after the `properties` argument. It should be an integer and defaults to `400`: http://api.jquery.com/animate/ – Jasper Dec 03 '18 at 19:27
It's a bad idea to animate `margin` property, because it changes the elements layout and causes reflow. The much better idea would be to use `transform-translate` property for animation with CSS transition. – Slava Fomin II Jan 25 '20 at 23:06

score 50 · Answer 2 · answered Aug 22 '11 at 19:38

50

$('div').css({
    position: 'relative',
    top: '-15px'
});

answered Aug 22 '11 at 19:38

gislikonrad

3,401
2
22
24

score 14 · Answer 3 · answered Jul 19 '17 at 08:51

14

In css add this to the element:

margin-top: -15px; /*for exact positioning */
margin-top: -5%; /* for relative positioning */

you can use either one to position accordingly.

answered Jul 19 '17 at 08:51

srinivas

4,778
2
32
43

This method works best, if you want to use only CSS – Ryan Trainor Nov 30 '19 at 21:24

score 0 · Answer 4 · answered Dec 06 '19 at 10:24

0

you can also do this

margin-top:-30px; 
min-height:40px;

this "help" to stop the div yanking everything up a bit.

answered Dec 06 '19 at 10:24

Mr Heelis

2,370
4
24
34

How to move an entire div element up x pixels?

4 Answers4