0
前端面试CSS环节问题 top、translateY这种属性如果使用百分比，是相对于谁的百分比
赵山河 发布于 3 月 2 日
直接说结论：
相对定位、绝对定位下使用top、left这种属性的值，
如果用百分比，是相对于其父元素的长或者宽计算出的数值，
比如
父元素：
position:releative;
height:100px子元素：
position:absotule;
height:200px
top:30%;那么最终 top值为30px;
如果使用transform:translateY(30%);
这里的百分比，则是相对于该元素本身的高度计算得出；
父元素：
position:releative;
height:100px子元素：
position:absotule;
height:200px
transform:translateY(30%)这里transformY轴的值就为60PX
css html css3
阅读 30 更新于 3 月 2 日
赞
收藏
分享
本作品系原创， 采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议
赵山河的开发笔记
简单记录
关注专栏
赵山河
0 声望
0 粉丝
0 条评论
得票 时间
提交评论
赵山河
0 声望
0 粉丝
宣传栏
目录
▲
直接说结论：
相对定位、绝对定位下使用top、left这种属性的值，
如果用百分比，是相对于其父元素的长或者宽计算出的数值，
比如
父元素：
position:releative;
height:100px子元素：
position:absotule;
height:200px
top:30%;那么最终 top值为30px;
如果使用transform:translateY(30%);
这里的百分比，则是相对于该元素本身的高度计算得出；
父元素：
position:releative;
height:100px子元素：
position:absotule;
height:200px
transform:translateY(30%)这里transformY轴的值就为60PX
