今天碰到一个问题就是,当对元素设置translate后,其内部的设置了position:fixed的元素会失效,或者说达不到预期效果。
原因是因为,对于设置了translate的元素,浏览器会对其生成一个单独的层,脱离于原来的层。这是该元素内部的fixed元素相对应的定位层则变为了这个新的层。也就是说fixed并没有失效,只是其定位所参照元素变了。
mdn对其解释如下:
今天碰到一个问题就是,当对元素设置translate后,其内部的设置了position:fixed的元素会失效,或者说达不到预期效果。
原因是因为,对于设置了translate的元素,浏览器会对其生成一个单独的层,脱离于原来的层。这是该元素内部的fixed元素相对应的定位层则变为了这个新的层。也就是说fixed并没有失效,只是其定位所参照元素变了。
mdn对其解释如下: