position:fixed not work?
问题
在position:fixed的使用中,突然发现某个操作之后,fixed定位的位置变了??
bottom:0,left:0。本来应该在最下面,结果跑没影了。
wtf?position:fixed不是根据视口定位的吗?
Stacking Context -- 堆叠上下文
哦,如果position:fixed的父元素加了transform:xxx之后position:fixed会根据父元素定位。
原因应该是transform:xxx形成了Stacking Context -- 堆叠上下文。
堆叠上下文(Stacking Context):堆叠上下文是 HTML 元素的三维概念,这些 HTML 元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的 z 轴上延伸,HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
堆叠上下文的创建,该元素会影响其子元素的固定定位。设置了 position:fixed 的子元素将不会基于 viewport 定位,而是基于这个父元素。
So,如何触发一个元素形成 堆叠上下文 ?方法如下(参考自 MDN):
根元素 (HTML),
- z-index 值不为 "auto"的 绝对/相对定位,
- 一个 z-index 值不为 "auto"的 flex 项目 (flex item),即:父元素 display: flex|inline-flex,
- opacity 属性值小于 1 的元素(参考 the specification for opacity),
- transform 属性值不为 "none"的元素,
- mix-blend-mode 属性值不为 "normal"的元素,
- filter值不为“none”的元素,
- perspective值不为“none”的元素,
- isolation 属性被设置为 "isolate"的元素,
- position: fixed
- 在 will-change 中指定了任意 CSS 属性,即便你没有直接指定这些属性的值
- -webkit-overflow-scrolling 属性被设置 "touch"的元素
so,都会影响position:fixed 定位吗?不是
会影响的只有:
- transform 属性值不为 none 的元素
- perspective 值不为 none 的元素
- 在 will-change 中指定了任意 CSS 属性
引发问题的原因?
呃,zepto的$(el).show();会给元素加transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);
。
解决方案
就改成 $(el).css('display', 'block')
。。
position:fixed not work?的更多相关文章
- position:fixed和scroll实现div浮动【示例】
前言 在自己建站的过程中,要实现一个div随滚动条浮动的效果,网上找了些示例不太好用,还是自己动手,丰衣足食,写的不好请大家谅解,毕竟我不是搞前端的,因为自己建站毕竟每一步都必须自己来,这边只是做个记 ...
- 修正IE6不支持position:fixed的bug(转)
众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著.前些天我做自己的博客模板的时候,遇到了这个问题.当时就简单的无视了IE6— ...
- 通过定位position="fixed"实现网页内容的固定层效果
在网页的顶部或者底部导航栏中经常需要使用到固定层的效果,即紧挨浏览器窗口的顶部或底部而网页其他内容的影响. 一.实现 主要通过设置导航栏元素的位置属性position="fixed" ...
- 让IE6支持position:fixed的方法,CSS expression与JavaScript eval讲解
做吸顶效果或是固定效果时,使用position:fixed无非是最方便的,可是万恶的IE6是没有fixed这个属性值的,而我们要使IE6能够像fixed一样固定在浏览器中的某个位置,使用onscrol ...
- 安卓手机微信页面position: fixed位置错误
今天做项目的时候发现动用position: fixed做弹窗时,用margin-top:50%这样外边距来响应式的控制位置时,在微信里打开页面的弹窗,弹窗在手机上显示的位置和实际上在手机上的位置不一样 ...
- 解决IOS safari在input focus弹出输入法时不支持position fixed的问题
该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...
- 不受控制的 position:fixed
本文为纯理论文章,没有 Demo,没有配图,可能会略微枯燥. 大家都知道,position:fixed 在日常的页面布局中非常常用,在许多布局中起到了关键的作用.它的作用是: position:fix ...
- 苹果手机对网页上样式为position:fixed的弹窗支持不好的解决办法
在Web页面上,如果想模拟对话框效果,一般会给div元素添加position:fixed的样式来实现,然后给背景添加一个半透明的遮罩.如: .fixedDiv { position: fixed; t ...
- display、box-sizing,position有哪些值?
display有哪些值? none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline- ...
随机推荐
- ionic获取表单input的值的两种方法
1.参数传递法 直接在input处使用 #定义参数的name值,注意在ts中参数的类型 html页面: <ion-input type="text" placeholder= ...
- Numpy库的下载与安装总结
今天在做Plotly的散点图时,需要Numpy 这个库的使用 没有安装Numpy这个库的时候,报错一般是下图这样:ModuleNotFoundError: No module named 'numpy ...
- 用 Heapster 监控集群 - 每天5分钟玩转 Docker 容器技术(176)
Heapster 是 Kubernetes 原生的集群监控方案.Heapster 以 Pod 的形式运行,它会自动发现集群节点.从节点上的 Kubelet 获取监控数据.Kubelet 则是从节点上的 ...
- 【转载】xilinx 高速收发器Serdes深入研究
此篇文章深入浅出介绍了关于高速串行收发器的几个重要概念和注意事项,为方便知识点复习总结和后续查阅特此转载,原文标题及链接为:xilinx 高速收发器Serdes深入研究 - CSDN博客 http ...
- More Moore and More than Moore
More Moore and More than Moore ——基于硅光电子学探讨摩尔定律的延续和发展 1965年4月,<电子学>杂志第114页上刊载了Intel创始人之一戈登·摩尔(G ...
- 一道C++、MFC上机面试题
题目:写一个基于MFC对话框的程序,界面输入整型a和b,点击计算,开启线程计算a+b,并把结果返回给对话框.(1)不能用结构体和类(2)用到自定义消息(3)鼠标移到[计算]按钮上变为收尸图标.参考界面 ...
- Windows Server 2012 R2 配置FTP服务器
Windows Server 2012 R2 安装IIS参考上一篇配置IIS 8.0:https://www.cnblogs.com/aq-ry/p/9329310.html 搭建完IIS 后,最近又 ...
- SQLServer之创建DML AFTER UPDATE触发器
DML AFTER UPDATE触发器创建原理 触发器触发时,系统自动在内存中创建deleted表或inserted表,inserted表临时保存了插入或更新后的记录行,deleted表临时保存了删除 ...
- python:过滤字符串中的字母数字特殊符号
今天遇到的字符串处理的问题,记录一下方便使用 str1 = input('请输入一个字符:') #初始化字符.数字.空格.特殊字符的计数 lowercase = 0 uppercase = 0 num ...
- Selenium自动化测试-unittest单元测试框架使用
一.什么是unittest 这里我们将要用的unittest是python的单元测试框架,它的官网是 https://docs.python.org/2/library/unittest.html,在 ...