transform对定位元素的影响

Posted 2020-09-02

1、基本概念

absolute：生成绝对定位的元素，相对于除position:static 定位以外的第一个有定位属性的父元素进行定位，若父元素没有定位属性则相对于浏览器窗口的左上角定位，定位的元素不再占据文档的空间。

relative：生成相对定位的元素，相对于其正常位置进行定位,定位的元素仍然占据文档的空间。

 

2、transform对子元素定位的影响

父元素添加transform属性后，子元素定位参照变成父元素，包括定位left，top，和width。并且父元素任然占据位置，后面的兄弟元素不能覆盖，相当于添加了relative属性。但是left，top无效。