如何让position fixed不再基于浏览器窗口定位
position:fixed默认是相对浏览器定位的。
就是将某个元素固定在浏览器的某个确定的位置,不随滚动条的移动而变化;
MDN对position: fixed有一个注释:
当元素祖先的 transform 属性非 none 时,容器由视口改为该祖先。
也就是说如果想让fixed不相对浏览器定位,只要给它的随便哪个祖先设上非none的transform,问题就解决了。这祖先可以是static的,也就是说随便哪个祖先都行。比如说给body设一个transform: translateZ(0);,测试有效。
不过想让 position:fixed 的元素相对于父元素定位,应该改成 absolute 以及父元素 relative。而不是让 fixed 干不应该干的事。相对父元素定位需要position fixed吗?难道这是想搞事情啊!脱离党指导路线的都不是什么好路子!
而且transform会对定位产生副作用,建议尽量避免一起使用。
如何让position fixed不再基于浏览器窗口定位的更多相关文章
- 父节点使用css的transform: translate(0, 0)时position:fixed在chrome浏览器中无效
今天在做移动端的页面,无意间发现了一个Chrome浏览器下的一个bug,在使用CSS3的transform: translate(0, 0)属性对节点A进行位置转化,此时A节点下面有一个字节点B,节点 ...
- position:fixed相对父级元素定位而不是浏览器
position:fixed默认是相对浏览器定位的 原理:fixed定位相对父级容器定位,不添加:top,bottom,left,right样式,通过margin定位 代码:http://jsbin. ...
- position fixed 相对于父级定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [z]兼容IE6的相对于浏览器窗口定位
http://blog.uedsc.com/css-position.html http://www.w3cmm.com/notepad/css-position.html http://sofish ...
- position:fixed 相对父元素定位
position:fixed是对于浏览器窗口定位的,要实现相当于父元素定位,可以这样: 不设置fixed元素的top,bottom,left,right,只设置margin来实现. 这种方法本质上fi ...
- position:fixed not work?
问题 在position:fixed的使用中,突然发现某个操作之后,fixed定位的位置变了?? bottom:0,left:0.本来应该在最下面,结果跑没影了. wtf?position:fixed ...
- 解决IE6浏览器下position:fixed固定定位问题
像你所遇到的问题一样, IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法.如果我们需要做某个元素始终位于浏览器的底部, ...
- 移动Web开发,4行代码检测浏览器是否支持position:fixed
不废话,直接上代码 var div = document.createElement('div'); div.style.cssText = 'display:none;position:fixed; ...
- position:fixed 兼容浏览器低版本
项目中遇到的坑,写篇博客做个笔记纪念下,position: fixed一般来说都兼容各个浏览器,但是要兼容浏览低版本问题,就得用-webkit-transform: translateZ(0);这段代 ...
随机推荐
- springboot只能一个main方法解决办法
pom.xml修改properties,增加这行 <start-class>com.eshore.main.SpringBootStarter</start-class> 或者 ...
- PIE SDK水体指数法
1.算法功能简介 单波段阈值法是通过选择某单一波段为判识参数,这一波段往往是水体特征最明显而其它地物相对不太突出的波段(如近红外波段和中红外波段),然后再划定阈值来确定水体信息.该方法主要是利用水体在 ...
- python之三方库(冷门+热门)
AES加密库 pycryptodome
- Lucene BooleanQuery相关算法
BooleanQuery对两种不同查询场景执行不同的算法: 场景1: 所有的子句都必须满足,而且所有的子句里没有嵌套BooleanQuery. 例: a AND b AND c 上面语句表示要同时包含 ...
- MES系统如何帮助烟草行业管理生产流程
与很多其他行业一样,烟草MES系统可以帮助卷烟企业实现智能生产.精益制造.快速实现烟草企业数字化车间的创建,助力企业实现改造升级,从而提升企业生产效率,降低生产成产.烟草行业得MES者得天下. 烟草行 ...
- ios视频网盘
http://pan.baidu.com/share/home?uk=1711799154#category/type=0
- iptables 学习笔记
1. 安装iptables yum install iptables centos7: yum install -y iptables-services 2. service命令 查看iptables ...
- Django框架(十七)-- CBV源码分析、restful规范、restframework框架
一.CBV源码分析 1.url层的使用CBV from app01 import views url(r'book/',views.Book.as_view) 2.as_view方法 as_view是 ...
- windows删除桌面右键“英特尔@显卡设置”
运行中输入:regedit 确认运行注册表编辑器,依次单击展开 HKEY_CLASSES_ROOT\Directory\Background\shellex\ContextMenuHandlers键 ...
- 爬虫---Beautiful Soup 通过添加不同的IP请求
上一篇爬虫写了如何应付反爬的一些策略也简单的举了根据UA的例子,今天写一篇如何根据不同IP进行访问豆瓣网获取排行版 requests添加IP代理 如果使用代理的话可以通过requests中的方法pro ...