相/绝对定位和translate的区别
在实现图片从左边-150px到0的过程，我先想到的是translateX(150px)，这样也能实现效果，请问这两种方法有什区别吗？
以下是我的代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .cr-bgimg div span{ width: 100%; height: 100%; position: absolute; left: -150px; top: 0; background-repeat: no-repeat; -webkit-transition:transform .5s ease-in-out; -moz-transition:transform .5s ease-in-out; -ms-transition:transform .5s ease-in-out; transition:transform .5s ease-in-out;}.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg > div span:nth-child(1),.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg > div span:nth-child(2),.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg > div span:nth-child(3),.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg > div span:nth-child(4){ z-index: 10; -webkit-transform:translateX(150px); -moz-transform:translateX(150px); -ms-transform:translateX(150px); transform:translateX(150px);} |
170
收起
正在回答
1回答
位置改变可以使用positon定位的top,left等来实现，也可以translate移动来实现，注意两者虽然都可以产生位移，但是有区别：
1. position:relative 和 position:absolute 是针对浏览窗口左上角或父元素进行top、left的移动；
2. translate() 以该元素的内容区、补白(padding)、边框(border)为标准计算的。
总结：position:relative 和 position:absolute 这一类的属性为定位、布局服务，而 CSS3 translate() 这些属性为动画服务。
希望对你有帮助，祝学习愉快。欢迎采纳。
HTML5与CSS3实现动态网页 2018
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星