logo标签列表

CSS中的'transform'与'position:absolute'有何区别？

css
3

什么是两者之间的不同之处？

position: absolute;
top: 50%;
left: 50%;

和

transform: translate(-50%, -50%);

使用哪个更好？

3
可能是CSS翻译与更改绝对定位值的区别的重复问题。 - Jon P
  1. 基于其父级（如果有）的位置，否则基于屏幕。
  2. 基于自身，即根据其自身的宽度/高度移动到此处或那里。
 - VXp
1个回答
2
position: absolute;
top: 50%;
left: 50%;

该对象根据其父元素定位。它会随着父元素位置的改变而改变。

transform: translate(-50%, -50%);

这个对象基于其本身。如果移动对象，它将根据其新位置进行平移。

虽然两者在初始格式上可以显示相同的结果，但在样式化“parent”元素时会有明显的差异。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接