显示我使用绝对位置或转换来移动<div>周围的页面?
我似乎记得读到移动对象使用位置，如:
dialog.style.bottom = "100px";
比较慢，最好使用transform来移动对象:
dialog.style.transform = "translateY(100px);
然而，我也有一个CSS过渡的地方:
transition: 2s
有什么区别吗，变换仍然优先于位置还是它们现在都一样?
如果你想让它动画化，使用transform:
dialog.style.transform = "translateY(100px)";#dialog {transform: translateY(50px); transition: all 2s;}<div id="dialog">Hello</div>另请阅读为什么使用Translate()移动元素优于Pos:abs Top/left
"更好",v1
关于"更好"在这种情况下意味着什么，我的第一个想法是哪个更适合在不同情况下使用。导致我想说的是:"不要混淆定位和设计运动。"
就是一个很好的例子。你有一个按钮。你想给它添加一个效果按钮，以便在它的活动状态下，它向下推2像素来模仿"被推"效应。这是一个应该做的设计动作翻译()。你可以用顶部或底部和相对定位，但是你混淆了定位的概念和design-y运动
假设你在应用的其他地方放置了一个按钮(完全合法的)。现在当top: 2px;应用于按钮在激活状态下，该按钮可能会缩小在你没有预料到的地方，可能使按钮无法点击。
使用translate()总是会将元素从当前位置"轻推"这个位置非常适合这样的效果，或者任何效果专门设计运动。Chris Coyier在A Tale of Animation表演
请阅读这篇文章，它会为你提供所有你想知道的关于那个主题。https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/