如何让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);这段代 ...
随机推荐
- 基于直接缓冲区和非直接缓冲区的javaIO文件操作
基本概念: 1. 非直接缓冲区: 指的是通过jvm来缓存数据的,应用程序要读取本地数据要经历从本地磁盘到物理内存,然后copy到jvm中,然后再通过流的方式读取到应用程序中,写的操作正好与之相反. ...
- c# System.Net.Sockets =》TcpListener用法
private TcpListener _listener;#region 初始化 listener public override void Init() { try { DevInfo.Read ...
- ASP.NET Core 进程外(out-of-process)托管
ASP.NET Core 进程外(out-of-process)托管 在本节中,我们将讨论 ASP.NET Core 中的Out Of Process Hosting. ASP.NET Core 进程 ...
- C# 调用腾讯即时通信 IM
IM SDK API 概述 https://cloud.tencent.com/document/product/269/33543 /// <summary> /// IM SDK 初始 ...
- Flask笔记:cookie
在网站中,HTTP请求是无状态的:第一次请求成功后,第二次请求时服务器依然不知道这次请求的所属用户是谁.为了解决这个问题,在第一次请求成功后,服务器会生成并返回对应的cookie信息给浏览器,而浏览器 ...
- JDK1.8 —— 接口定义增强
使用default和static定义接口方法 JDK1.8(jre8)以后,接口中不在仅仅只允许定义抽象方法,开始允许定义普通方法了:而普通方法需要用default声明. interface IMes ...
- Vue-组件模板抽离的写法
VUE的模板分离写法. 1.第一种(不常用) <script type="text/x-template" id="myCpm"> <div& ...
- 微软官方的.net系列文档
闲下来的时候给自己补充补充基础,微软官方的相关技术文档地址,最新最全最官方:https://docs.microsoft.com/zh-cn/ 其中.NET专区:https://docs.micros ...
- [TCP/IP] 关闭连接后为什么客户端最后还要等待2MSL
MSL(Maximum Segment Lifetime)报文最大生存时间,2MSL即两倍的MSL,TCP允许不同的实现可以设置不同的MSL值. 第一,保证客户端发送的最后一个ACK报文能够到达服务器 ...
- 阅读高翔的RGBD-SLAM博文笔记
目录 高翔的RGBD-SLAM笔记 前端VO: 后端优化 高翔的RGBD-SLAM笔记 RGBD相机的特点: 使用RGBD相机中的深度这一维信息,以及相机的针孔成像模型,相机的内参,可以将二维点恢复成 ...