摘要:如题,祖先元素非时,记录一下中引起后代元素参考视图怪异表现和解决方案。不为元素预留空间,而是通过指定元素相对于屏幕视口的位置来指定元素位置。打印时,元素会出现在的每页的固定位置。
如题,祖先元素transform非none时,记录一下Iphone6中引起后代元素fixed参考视图怪异表现和解决方案。
层叠关系及参考视图
层叠上下文是HTML元素的三维概念,这些HTML元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的z轴上延伸,HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
文档中的层叠上下文由满足以下任意一个条件的元素形成:
根元素 (HTML),
z-index 值不为 "auto"的 绝对/相对定位,
一个 z-index 值不为 "auto"的 flex 项目 (flex item),即:父元素 display: flex|inline-flex,
opacity 属性值小于 1 的元素,
transform 属性值不为 "none"的元素,
mix-blend-mode 属性值不为 "normal"的元素,
filter值不为“none”的元素,
perspective值不为“none”的元素,
isolation 属性被设置为 "isolate"的元素,
position: fixed
在 will-change 中指定了任意 CSS 属性,即便你没有直接指定这些属性的值(参考 这篇文章)
-webkit-overflow-scrolling 属性被设置 "touch"的元素
关于层叠上下文的层级及创建,可以参考下张鑫旭大神的深入理解CSS中的层叠上下文和层叠顺序,相当详细;在今天讨论的问题中,知道position:fixed和transform非none都会创建新的层叠上下文,至于层级,在同一层叠上下文中,取决于后来居上及孰大孰上两个规则。
至于参考视图,两句话
absolute:不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。
fixed: 不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时,容器由视口改为该祖先。
祖先元素transform属性不为none对子元素fixed的影响
不考虑其他因素的前提下,祖先元素的transform属性不为none时,按照规范,后代元素的表现应为:
absolute元素依然保持以最近的非position: static;的元素为参考,其中祖先元素也会被视为非position: static;
fixed元素默认的参考视图是屏幕视口,在这里,祖先元素transform被设置为非none时,后代元素的参考视图应该是祖先元素;
Iphone6(未排查IOS版本)当中,不管祖先元素定位属性,子代元素定位属性为absolute/fixed时,子代的子代及再往后的子代,定位属性为fixed时,定位视图并不是祖先元素
祖先元素的子元素:定位视图是祖先元素;正常
祖先元素的子元素的子元素:定位视图是祖先元素;正常
祖先元素的子元素的子元素的子元素:以父级元素的左上角坐标为起点,祖先元素的长宽为长宽,画一个虚拟的视图,定位视图就是这个虚拟的视图;异常
祖先元素的子元素的子元素的子元素的往后每一代,都沿袭第三代开始的表现,依当前元素的父元素左上角坐标为起点,祖先元素长宽为长宽的虚拟视图为定位视图;异常
看代码及图:
/* html */1/* css */ .red{ width: 150px; height: 150px; background: red; text-align: center; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .green{ position: absolute; width: 120px; height: 120px; left: 0px; top: 0px; background: green; } .yellow{ position: fixed; width: 80px; height: 80px; left: 0px; bottom: 0px; background: yellow; } .black{ position: fixed; width: 50px; height: 50px; right: 0px; top: 0px; background: black; } .aquamarine{ position: fixed; width: 30px; height: 30px; right: 0px; bottom: 0px; background: aquamarine; } .blue{ position: fixed; width: 10px; height: 10px; right: 0px; bottom: 0px; background: blue; }23456
左边图为正常情况下的表现,transform所有后代元素的fixed参考视图都是transform的祖先元素,而右边的是iphone6上的表现,从第三代开始,参考视图变更为以父级元素左上角位置为起点,祖先元素长宽为长宽的虚拟视图为参考视图。因此情况变得不可控。
解决方案
既然事情因transform引起,就在fixed定位嵌套三层以上时慎用transform,这个为最基本的解决方案。
好吧,我没找到其他办法
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/112354.html
摘要:如题,祖先元素非时,记录一下中引起后代元素参考视图怪异表现和解决方案。不为元素预留空间,而是通过指定元素相对于屏幕视口的位置来指定元素位置。打印时,元素会出现在的每页的固定位置。 如题,祖先元素transform非none时,记录一下Iphone6中引起后代元素fixed参考视图怪异表现和解决方案。 层叠关系及参考视图 层叠上下文是HTML元素的三维概念,这些HTML元素在一条假想的相...
摘要:根元素包含块根元素的包含块是一个矩形叫做初始化包含块。如果属性是的话,包含块就是由组成的。示例二代码在这里,这个标签为默认的且它的父标签的为,所以标签的包含块为标签,通过我们的判断规则一来确定。 写在前面,本文将同步发布于Blog、掘金、segmentfault、知乎等处,如果本文对你有帮助,记得为我得到我的个人技术博客项目给个star哦。 指出错误观念 许多开发者认为一个元素的包含块...
摘要:是页面渲染的一部分。一个就是一个整体,所有子元素都会在里面渲染,而不会影响外面的元素。常见为,根元素,,元素,或者设置了的元素列举不同的清除浮动的技巧,并指出它们各自适用的使用场景。是一个把众多小图片打包成一个大图以减少请求。 CSS 中类 (classes) 和 ID 的区别。 id唯一,class可以多个 请问 resetting 和 normalizing CSS 之间的区别?你...
阅读 3657·2021-11-11 16:55
阅读 1627·2021-10-08 10:04
阅读 3556·2021-09-27 13:36
阅读 2740·2019-08-30 15:53
阅读 1841·2019-08-30 11:17
阅读 1238·2019-08-29 16:55
阅读 2082·2019-08-29 13:57
阅读 2463·2019-08-29 13:13