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/

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文为纯理论文章,没有 Demo,没有配图,可能会略微枯燥。大家都知道,position:fixed在日常的页面布...
    __越过山丘__阅读 894评论 1 2
  • 1、float与absolute 当float和absolute同时存在的时候,float时么有任何效果的,所以没...
    白璞1024阅读 959评论 0 50
  • position属性比起其他的基础属性来讲要复杂一些,我在这试着把里面的门道全部总结出来。 目前position有...
    microkof阅读 3,672评论 3 5
  • CSS的position总是属性很容易让人弄混~ 为了仔细区别它们,所以今天总结一下CSS的position属性~...
    fehysunny阅读 2,966评论 0 7
  • 浮动定位 BFC 边距合并 浮动元素 div的顺序是HTML代码中div的顺序决定的。 浮动可以理解为让某个div...
    nianxiaoge阅读 734评论 0 0