css百分比問題——`top`、`left`、'translate'的百分比參照誰?


比如 toplefttransform屬性的translate方法,他們的百分比都是相較誰而言的?

topleft是基於父元素的:
-w259

.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 的時候:

-w388

left設置成 50% 的時候,div.child的左、上距離就是div.parent的寬度的一半;

-w246


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM