position

(1)fixed失效情况:

在心理咨询中心出现的系统中,有一个弹窗,需要固定在窗口中,不让它随着滚轮的移动而移动,但是使用position: fixed居然没有效果,元素依然跟着浏览器滚动条走动,后来发现他的上层元素有的使用了transform: translate(0, 0);导致position: fixed功能失效了。所以特此记下来,当做一次小坑吧。

例子如下:


结果显示,当我滚动滚动条的时候,会随着我的滚动条滚动。

所以,我们定位才会失效。当我们对上级元素设置transform: none;或者display:inline,就能解决这样的问题。

下面是网上对定位写的不错的一篇帖子,给大家做个参考:

https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/

你可能感兴趣的:(position)