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

Posted 2023-02-15

【中文标题】如何将整个 div 元素向上移动 x 个像素？

【英文标题】：How to move an entire div element up x pixels?

【发布时间】：2011-11-01 10:13:33

【问题描述】：

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

我该怎么做？

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

【问题讨论】：

你应该提到它当前是否有任何定位CSS。这样你就可以改变它（例如使用 javascript）。

你考虑过position: relative; top: -15px;吗？

【参考方案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 */

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

【讨论】：

如果你只想使用 CSS，这个方法效果最好

【参考方案4】：

你也可以这样做

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

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