transform对未设置定位属性普通元素的影响是个巨坑,自己亲身体验的总共有三点,简单理解相当于给当前元素设置了一个 positon:'relative'
但也不完全是(第2点)。
- 提升该元素的垂直地位,可以理解成z-index变大
绿色块的元素顺序在红框后面,红框设有margin-left:-20px
,正常应该是绿块盖住红框,设置tranform则红框会盖住绿块。
- 改变子元素的定位属性,相当于fixed变成absolute,absolute变成relative
浅蓝色块本身应当一直离窗口30px,设置tranform则发现变成离红框的距离变成了30px,同时蓝色块的定位也发生了改变。
- 使绝对定位(absolute)的子元素受父元素overflow:hidden的作用。(ps:绝对定位(absolute)的子元素宽度大于父元素,如果父容器的定位是static,也就是默认时,overflow:hidden无效)
蓝色块一开始不受父元素的overflow作用,设置tranform则发现受父元素overflow影响。
预览链接:
其他前端有趣的例子和坑合集:https://github.com/wqhui/blog
设置完transform属性后,浅蓝色块相当于红框去定位;蓝色块也相当于红框去定位;红框直接盖过了绿色块。