css里的transform:translateY(15%)和top:15%,margin-top:15有啥区别啊？

Question

为什么我使用transform:translateY(15%)可以使得日期框居中，然后top:15%。就会跑出深蓝色背景框呢？

这两种距离y轴的方法有什么不一样？

Answer 1

设置top，必须要position才可以生效，15%表示，离父元素顶部的高度为父元素高度的15%，如果为100%，则不可见，当然这个父元素指的不是直接父元素，而是所有父元素中开启了相对定位的并且离这个元素最近的父元素。margin-top指的是直接父元素，如果设置成百分比，就是该元素离直接父元素顶部的边距,transform:translateY 这个也可以用来设置居中，但是用的比较少，没有flex好用，以前研究过这个，忘了，有时候用这个能解决一些特殊问题，但是flex基本上可以解决绝大部分问题