如何让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);这段代 ...
随机推荐
- javascript的数据类型检测
JavaScript有两种数据类型,分别是基本数据类型和引用数据类型.其中基本数据类型包括Undefined.Null.Boolean.Number.String和Symbol(ES6新增,表示独一无 ...
- WebApplicationInitializer启动分析
从Servlet 3.0 开始Tomcat已经支持注解式的配置.了解下,在注解的配置方式下,Web是怎样启动起来的. 通过注解配置一个Web应用 下面是一个通过注解实现一个简单的Web应用 publi ...
- linq,sqlmethods,like
LINQ to SQL will translate .NET methods in this manner: text.StartsWith(...) = LIKE ...% text.Contai ...
- C# 跨线程访问UI不报错,必须使用Invoke。
代码有时跨线程访问UI,修改按钮Enable属性不报异常.调试发现修改按钮属性的线程是Background,执行不报异常. 在窗体构造中添加 Control.CheckForIllegalCrossT ...
- m3u8的blob格式视频在线下载
有时候我们希望在在线观看视频的同时将对应的视频下载下来,研究了很多方式,最终发现使用ffmpeg这个工具可以很好完成m3u8格式. 具体方法就是执行: ffmpeg -i https://cdn-ho ...
- Flask补充--threading.local对象
目录 Local 局部变量 全局变量 使用threading.local() 自定义threading.local 函数版 面向对象版 通过setattr和getattr实现 每个对象有自己的存储空间 ...
- 腾讯WeTest&TesterHome深圳线下沙龙
腾讯官方的一站式品质开放平台「腾讯WeTest」携手知名测试社区「TesterHome」以及3家金融相关企业为我们带来的金融专场. 本次活动内容主要以金融公司的测试落地和测试技术为主,我们希望你是一个 ...
- opencv::KMeans方法概述
KMeans方法概述 . 无监督学习方法 . 分类问题,输入分类数目,初始化中心位置 . 硬分类方法,以距离度量 . 迭代分类为聚类 //---------- //迭代算法的终止准则 //--- ...
- Hibernate基于注解实现自关联树形结构实现
很久没用过Hibernate了,项目需求需要使用,并建立树形结构,在开发中遇到一些问题,在这里记录一下. 1.创建数据库表,主要是设置标志信息,不然插入数据库会报id不能插入null的错误. 2.创建 ...
- [小程序]微信小程序登陆并获取用户信息
1.小程序js端调用框架登陆API,获取到一个临时code,拿着这个code去调用自己的服务端接口 2.在自己的服务器端,使用app_id app_secrect code可以获取到用户的openid ...