css left top和transform的区别

最新推荐文章于 2025-06-09 18:22:45 发布
最新推荐文章于 2025-06-09 18:22:45 发布
阅读量1.6k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/liuhua3000/article/details/54711196
本文解析了lefttop和transform属性在不同场景下百分比计算的区别。lefttop使用父节点尺寸为基准进行位移，而transform则依据自身尺寸进行计算。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

left top在选择%计算时候，是按照父节点的长宽来位移，而transform的%是按照自身节点的宽高来位移。
liuhua3000
关注
CSS-position/transform
深度安全实验室
06-30 394
CSS-position/transform
css使用transform与top延时比较(为什么使用transform)
qq_24270109的博客
03-14 1410
Css移动位置使用transform与方位top改变的性能区别 .box{ width: 100px; height: 100px; border: 1px solid red; position: relative; } //css样式 1.使用top修改 setTimeout(function () { $('.box').css('top', '200px...
用 top left 定位和 transform 的区别
pky@
07-24 4361
链接：https://www.zhihu.com/question/334077465/answer/759985633 来源：知乎 最首要的区别是元素位置： 使用 top left 定位是直接改变元素真实位置的，简单来说你 top: 5px 那就真的是离父容器上端 5px 或者偏离顶部定位 5px（这里我们不讨论 position 各种定位的破事） 但是你用 transform: transla...
CSS居中之 { left:50%； top:50%； transform:translate(-50%,-50%)； }
kfepiza的博客
03-04 2736
也可以写成:用 translate 的必须是块级元素, 或者absolute,fixed 才会生效比如 translate 在 relative+inline 时不会起作用left 和 top 在 position:relative,absolute,fixed 才会生效所以position不能是static;display不能是inline,relative+inline 时, left和top起作用, translate不起作用。
CSS 中 `position` 与 `transform` 属性详解
最新发布
weixin_43991457的博客
06-09 427
CSS 的 position 和 transform 属性是布局与动画的核心。position 控制元素的定位方式（如 relative、absolute 等），决定是否脱离文档流及参照对象；transform 提供 2D/3D 变换（如平移、旋转、缩放），不影响其他元素。两者常结合使用，例如通过 position: absolute 定位元素到父容器中心后，再用 transform: translate(-50%, -50%) 微调实现完美居中。transform 还可叠加多种效果（如 rotate+sc
html+left属性,HTML+CSS入门 浅析top、left、transform属性的translate方法百分比都是相较谁而言的...
weixin_27729671的博客
06-04 706
本篇教程介绍了HTML+CSS入门 浅析top、left、transform属性的translate方法百分比都是相较谁而言的，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<top、left、transform属性的translate方法，他们的百分比都是相较谁而言的？top、left是基于父元素的：.parent{position:relative;backgrou...
【CSS】`top: 50%；` 和 `transform: translateY(-50%)；`的区别和联系
小秀的博客
06-23 2900
`top: 50%;` 和 `transform: translateY(-50%);`的区别和联系
CSS中的transform（二维变换）
热门推荐
Code6E的博客
03-24 2万+
案例来自pink老师教程，自己做了一些总结和优化，侵权删。原教程链接https://www.bilibili.com/video/BV14J4114768?p=357
CSS居中效果之transform的使用
09-25
这种方法的核心在于，通过设置元素的绝对定位（`position: absolute`），然后将`top`和`left`属性设置为50%，这将元素的左上角移动到其父元素的中心。然而，由于元素的宽度和高度，元素的中心并不在几何中心，所以...
CSS3中动画属性transform、transition和animation属性的区别
09-27
在CSS3中，动画属性主要包括`transform`、`transition`和`animation`，它们各自有着独特的功能和应用场景。了解这些属性的区别对于创建动态的、交互式的网页设计至关重要。 **transform属性** `transform`属性主要...
详解css3使用transform出现字体模糊的解决办法
01-18
top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; width: 405px; background-color: #ffffff; height: 226px; -webkit-box-shadow: 0 0 2em #5191f1; -...
CSS-transform 平面/空间（移动、旋转、缩放、过渡）略解以及示例
NewHouser的博客
10-25 6704
transform: translate(水平移动距离，垂直移动距离);//距离的取值可以是数字或百分比向右向下为正数，向左向上为负数括号内只填一个值，默认为水平方向移动的距离
关于 top、left 结合 translate 实现居中的原理探讨
weixin_34068198的博客
02-23 667
关于 top、left 结合 translate 实现居中的原理探讨 前情提要 在居中对齐的方法中常用的一种方法之一，就是使用绝对定位结合 translate、top、left实现居中，探讨原理之前先来看一下实现代码和实现效果： 预览 上面的实现效果最主要的代码如下： .out { position: relative; } .in ...
Transform【变形】属性
精彩人生
02-11 6407
来源：http://www.w3cplus.com/content/css3-transform 今天开始我们一起来学习有关于CSS3制作动画的几个属性：变形(transform)、转换(transition)和动画(animation)等更高级的CSS3技术。本文主要介绍的是这三个属性之中的第一个──变形transform。 Transform字面上就是变形，改变的意思。在CSS3中tr
为什么使用使用transform来代替top_使用scikitlearn进行机器学习
weixin_39980347的博客
11-20 288
更高级的scikit-learn介绍 导语为什么要出这个教程？1.基本用例：训练和测试分类器练习2.更高级的用例：在训练和测试分类器之前预处理数据2.1 标准化您的数据2.2 错误的预处理模式2.3 保持简单，愚蠢：使用scikit-learn的管道连接器练习3.当更多优于更少时：交叉验证而不是单独拆分练习4.超参数优化：微调管道内部练习5.总结：我的scikit-learn管...
腾讯网页制作遇到的问题
L19541216的博客
03-12 165
做效果的时候 transform 相对来说是比较方便的，因为 transform 的视角是元素本身，所以比较直观。比如你希望一个元素向左 50px 那就是 transform: translateX(-50px)，但是如果用 left 而你的父子元素都是 position: absolute，那可能你用 left 就要写成从 left: 100px 到 left: 30px，这就很不直观。1.相同条件下，setTimeout() 只执行一次，setInterval() 则循环执行；
移动端为什么要用transform代替left等属性
youhebuke225的博客
06-14 632
移动端为什么要用transform代替left等属性 详情点击
使用合适的CSS优化界面：translate和top/left的比较
michael8512的博客
07-21 3653
Guidelines for translate top/left花了大量的时间去绘制每一帧。所有的css包括好性的box-shdow，都是在CPU上计算的。在translate版本中，却让这个macbook在自己新的图层在GPU中得到提升。此时此元素macboox是在自己单独的一层上，任何2D transform，3D transform或者opacity的变化都可以完全的使用GPU，
精通CSS3：运用transform与transition实现炫酷导航动画
使用 transform 属性时，可以利用 transform-origin 属性修改元素的变换原点，例如：`transform-origin: left top;`。默认情况下，变换原点是元素的中心。 #### Transition 属性 当需要元素变化过程中有一个过渡...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值