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- ...
随机推荐
- Android为TV端助力 反编译
http://blog.csdn.net/vipzjyno1/article/details/21039349/ apktool.bat d -f test.apk test 这条命令修改 ...
- mybatis中:selectKey返回最近插入记录的id
<insert id="insert" parameterType="com.lls.model.Employee"> <!-- select ...
- IPD体系向敏捷开发模式转型实施成功的四个关键因素
文/杨学明 集成产品开发(IPD).集成能力成熟度模型(CMMI).敏捷开发(Agile Development)是当前国内外企业产品研发管理的最常用的3种模式.随着创新环境的快速发展,许多企业都会 ...
- Windows应急响应常识
Windows 应急响应 常见事件ID 1102 清理审计日志 4624 账号登陆成功 4625 账号登陆失败 4672 授予特殊权限 4720 创建用户 4726 删除用户 4728 将成员添加到启 ...
- Server/Service/Engine/Host/Context} Setting property 'source' to 'org.eclipse.jst.jee
双击 勾上蓝色保存
- MySQL常用数值函数
数值函数: 用来处理很多数值方面的运算,使用数值函数,可以免去很多繁杂的判断求值的过程,能够大大提高用户的工作效率. 1.ABS(x):返回 x 的绝对值 mysql> select abs(- ...
- sklearn使用——梯度下降及逻辑回归
一:梯度下降: 梯度下降本质上是对极小值的无限逼近.先求得梯度,再取其反方向,以定步长在此方向上走一步,下次计算则从此点开始,一步步接近极小值.需要注意的是步长的取值,如果过小,则需要多次迭代,耗费大 ...
- Configuring Apache Kafka Security
This topic describes additional steps you can take to ensure the safety and integrity of your data s ...
- koa 路由配置
Koa 路由 路由(Routing)是由一个 URI(或者叫路径)和一个特定的 HTTP 方法(GET.POST 等) 组成的,涉及到应用如何响应客户端对某个网站节点的访问. 通俗的讲:路由就是根据不 ...
- 19.java反射入门
一.反射机制是什么反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态调用对象的方法的功能称为jav ...