前端面试CSS环节问题 toptranslateY这种属性如果使用百分比，是相对于谁的百分比

Posted 2021-09-27 赵山河

直接说结论：
相对定位、绝对定位下使用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