CSS中 定位position 和 transform 移动元素的比较

最新推荐文章于 2024-07-26 09:56:47 发布
最新推荐文章于 2024-07-26 09:56:47 发布
阅读量1.4k 收藏 1
点赞数 5
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45702261/article/details/123711700
版权
本文探讨了CSS中使用position和transform移动元素的区别。虽然两者都能实现元素移动，但transform在性能上优于position，因为它不会改变元素原始位置，避免了浏览器的重绘和布局调整，尤其在动画效果中更为高效。建议优先考虑使用transform进行元素移动。
摘要由CSDN通过智能技术生成

主要解决问题：

在使用 transform: translate(50%,50%); 平移元素后，再用 offsetLeft 和offsetTop 获取该元素距离 body 左侧距离时，无法获取经 translate 移动的部分，显示为 0

答：translate属性不会改变元素原始位置。

讨论对象

position

CSS中我们想要改变一个元素的位置，我们可以采用的方法之一就是定位，这也是我们最先接触的方法。其主要用法就是给需要移动的元素的父元素或以上添加 position:relative; 再给自身添加 position:absolute; 然后通过改变方位（top，left，right，bottom）来实现元素的移动。

transform

CSS3中提供了transform属性，其中的translateX和translateY值可以实现元素的横向与纵向移动。

区别和选择

既然在已有移动功能存在的情况，为何CSS3需要新增一个transform属性呢？请大家看下面这个demo

<style
最低0.47元/天 解锁文章
BA..
关注
专栏目录
前端性能优化-CSS的性能优化：--transform与position的区别、硬件加速工作原理及注意事项
thewar196的博客
05-06 3287
前端性能优化 CSS的性能优化： transform与position的区别 硬件加速工作原理及注意事项
CSS中定位和transform的比较
Fight_inFourYears的博客
11-13 1160
探讨对象 Position CSS中我们想要改变一个元素的位置，我们可以采用的方法之一就是定位，这也是我们最先接触的方法。其主要用法就是给需要移动的元素的父元素或以上添加position:relative;再给自身添加 position:absolute;然后通过改变方位（top，left，right，bottom）来实现元素的移动。 transform CSS3中提供了transf...
Css属性transform详解（变形、旋转、缩放）
最新发布
m0_64227118的博客
07-26 465
1.变形就是指通过css来改变元素的形状或位置 2.变形不会影响到页面的布局(不会脱离文档流) 3.平移元素，百分比是相对于自身计算的1.通过旋转可以使用元素沿着x y 或 z旋转指定的角度(transform)
transform.position与transform.localposition区别
一条咸鱼的博客
04-23 3209
1. position是根据世界原点为中心,为绝对坐标 2. localPosition是根据父节点为中心,如果没有父节点,localpositon和position是没有区别的 transform栏中看到的是相对坐标 ...
transform对定位元素的影响
au48135的博客
06-18 804
1温故知新 absolute：生成绝对定位的元素，相对于除position:static 定位以外的第一个有定位属性的父元素进行定位，若父元素没有定位属性则相对于浏览器窗口的左上角定位，定位的元素不再占据文档的空间。 relative：生成相对定位的元素，相对于其正常位置进行定位,定位的元素仍然占据文档的空间。 2.发现问题 首先看一个代码：a为父元素，b为子...
position: absolute 与 transform
学习记录
11-09 1880
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 原理：     理解      1.绝对定位元素的定位基准点是其有定位元素的祖先元素      2.而translate要做偏移，是相对于自身的中心点而言，如果用百分比做单位，参考值就是本身元素的宽度...
CSS中定位和TRANSFORM的比较
面向许三多编程
07-15 681
POSITION CSS中我们想要改变一个元素的位置，我们可以采用的方法之一就是定位，这也是我们最先接触的方法。其主要用法就是给需要移动的元素的父元素或以上添加 position:relative; 再给自身添加 position:absolute; 然后通过改变方位（top，left，right，bottom）来实现元素的移动。 TRANSFORM CSS3中提供了transform属性，其中的translateX和translateY值可以实现元素的横向与纵向移动。 区别和选择 经过测试。TRANSFO
css 利用 position + transform 实现弹性盒子横向纵向居中
352328759的博客
12-18 1464
前端常有"横竖居中"的需求, 固定宽高的还好办 遇到宽高不确定的情况, 我向大家推荐下面这个方法 原理其实就两点 position: absolute; 的百分百参照父元素 transform: translate(-50%, -50%); 的百分百参照当前元素 position 和 transform 合起来的效果就是把父元素和当前元素的中点对齐, 从而达到居中的效果 demo <html> <head> <meta http-equiv="Content-Type"
CSS实现定位元素居中的方法
09-25
当一个元素需要绝对定位时，我们通常会设置`position: absolute`，然后将其左边缘和上边缘分别移动到容器的中心。为了做到这一点，我们可以使用如下CSS代码： ```css .element { width: 600px; height: 400px; ...
CSS居中效果之transform的使用
09-25
这种方法的核心在于，通过设置元素的绝对定位（`position: absolute`），然后将`top`和`left`属性设置为50%，这将元素的左上角移动到其父元素的中心。然而，由于元素的宽度和高度，元素的中心并不在几何中心，所以...
html中如何整体移动,css样式中怎么移动div？
weixin_42466857的博客
05-31 3902
在html中，有时需要使某个div上下左右移动，使div元素位置产生偏移。本文使用了css3的transform:translate(X,Y)，和css的相对定位来实现div元素的偏移。css样式中移动div的方法：一、使用css3 transform:translate(X,Y)来偏移元素1、transform属性应用于元素的2D或3D转换，这个属性允许你将元素旋转，缩放，移动，倾斜等。使用tr...
用 top left 定位和 transform 的区别
pky@
07-24 4262
链接：https://www.zhihu.com/question/334077465/answer/759985633 来源：知乎 最首要的区别是元素位置： 使用 top left 定位是直接改变元素真实位置的，简单来说你 top: 5px 那就真的是离父容器上端 5px 或者偏离顶部定位 5px（这里我们不讨论 position 各种定位的破事） 但是你用 transform: transla...
利用相对定位+transform实现盒子水平居中
笔记
01-03 356
上一篇我们用定位实现了盒子相对于整个页面水平居中，其实实现盒子水平居中的方式又很多种，这篇我们来利用相对定位+transform实现盒子水平居中。表示盒子在x轴中水平方向上移动，y轴水平方向上移动。话不多说，直接上代码。
position和transform的用法
weixin_51877075的博客
11-01 2254
POSITION CSS中我们想要改变一个元素的位置，我们可以采用的方法之一就是定位，这也是我们最先接触的方法。其主要用法就是给需要移动的元素的父元素或以上添加 position:relative; 再给自身添加 position:absolute; 然后通过改变方位（top，left，right，bottom）来实现元素的移动。 TRANSFORM CSS3中提供了transform属性，其中的translateX和translateY值可以实现元素的横向与纵向移动。 区别和选择 经过测试。TRANSFO
【CSS3定位、变形transform、文字居中、区块元素居中】06
mango660的博客
11-24 3338
文章目录22. 定位22.1 相对定位22.2 绝对定位22.3 粘性定位23. 变形24. 居中 22. 定位 position_MDN static：无定位(默认值) 元素出现在正常的流中(忽略偏移值样式：top, bottom, left, right 和层级样式：z-index样式) 按照文档的流式(flow)定位，将元素放到一个合适的地方。流式定位能很好的自适应各种布局，取得相对较好的布局效果 inherit：继承父元素的定位方式 22.1 相对定位 relative：相对定位 仍然
position: absolute 与 transform 来居中块级元素的问题
weixin_44794662的博客
03-18 342
position: absolute; top: 50%; left:50%; -webkit-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -...
CSS属性详解——position:absolute
热门推荐
Wod_7的博客
06-04 1万+
绝对定位absolute定位是CSS中的一种定位方式，可以将元素精确定位到一个确定的点，这与元素在文档流上的自然位置无关。相比起其他定位方式，绝对定位很灵活性，它可以将元素脱离文档流，使得元素的位置不受页面上其他元素的影响。相应地，元素独立悬浮于页面上。
当给盒子设置transform: scale()缩放样式时，通过offsetTop获取元素距离文档顶部的高度时，存在的浏览器兼容bug。
qq_40639028的博客
09-27 1860
由于不同浏览器内核不同，对代码解析可能不一致，所以出现兼容问题。 在chrome浏览器中，当给<div>盒子设置了transform: scale()缩放样式后，通过offsetTop获取该div盒子中某元素（<p>）到浏览器顶部高度时，不能获取到实际高度，得到的实际是（<p>）元素到<div>之间的高度。 但在Safari浏览器中，盒子设置transform: scale()缩放样式，通过offsetTop获取某一元素到浏览器顶部高度不会存在差别化，都能
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值