css百分比问题——`top`、`left`、'translate'的百分比参照谁？

标签：color   设置   div   http   text   com   TE   corn   osi   

比如 top、left、transform属性的translate方法，他们的百分比都是相较谁而言的？

top、left是基于父元素的：

.parent {
    position: relative;
    background-color: rgb(243, 225, 225);
    height: 100px;
    width: 240px;
}

.child {
    text-align: center;
    width: 100px;
    background-color: cornflowerblue;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);  
}

translate的参数：left（x 坐标） 和 top（y 坐标） 位置参数 ，

如果是百分比，会以本身的长宽做参考

top:0; left:0的时候：

把left设置成 50% 的时候，div.child的左、上距离就是div.parent的宽度的一半；

css百分比问题——`top`、`left`、'translate'的百分比参照谁？

标签：color   设置   div   http   text   com   TE   corn   osi   

原文地址：https://www.cnblogs.com/n2meetu/p/9141596.html