如何将整个 div 元素向上移动 x 个像素？答案

【问题标题】：How to move an entire div element up x pixels?如何将整个 div 元素向上移动 x 个像素？
【发布时间】：2011-11-01 10:13:33
【问题描述】：

我想将整个 div 及其内容重新定位大约 10-15 像素。

我该怎么做？

注意：这是滑块元素，所以当我单击按钮时，滑块会向下滑动。完成后，我想将其重新定位大约 15 像素。

【问题讨论】：

【解决方案1】：

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

这将改变 id 为“div_id”的元素的 css

为了获得你想要的效果，我建议将上面的代码添加到动画中的回调函数中（这样动画完成后 div 会向上移动）：

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

当然，您可以像这样对边距的变化进行动画处理：

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

这里是 jQuery 中.css() 的文档：http://api.jquery.com/css/

这里是 jQuery 中.animate() 的文档：http://api.jquery.com/animate/

【讨论】：

@Kira duration 参数可以在 properties 参数之后传递。它应该是一个整数，默认为400:api.jquery.com/animate
动画margin 属性是个坏主意，因为它会改变元素布局并导致回流。更好的主意是使用 transform-translate 属性来实现带有 CSS 过渡的动画。

【解决方案2】：

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

【讨论】：

【解决方案3】：

在 css 中将这个添加到元素中：

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

您可以使用其中任何一种来进行相应的定位。

【讨论】：

【解决方案4】：

你也可以这样做

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

这个“帮助”可以阻止 div 把所有东西都拉高一点。

【讨论】：