创建堆叠上下文的方式ag环亚国际手机客户端

创建堆叠上下文的方式ag环亚国际手机客户端

为此,首先要找到所有能够使元素生成堆叠上下文的方法。

So,如何触发一个元素形成 堆叠上下文 ?方法如下(参考自 MDN):

根元素 (HTML),ag环亚国际手机客户端
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”的元素
接下来,我们要验证,是否所有设置了上面属性样式之一的元素,都有使其子元素的 position: fixed 失效的能力?

为此我做了下面一个小实验,基于最新的 Blink 内核。可戳:
ag环亚国际手机客户端
层叠上下文对 fixed 定位的影响(不同内核下表现可能不一致)

image

我们设置两个父子 div,子元素 fixed 定位,通过修改父元素生成层叠上下文,观察子元素的 fixed 定位是否不再相对视口。

XHTML

1
2ag环亚国际手机客户端
3

最初的 CSS :

CSS

.container {
width:10vw;
height: 10vw;
background: rgba(255, 100, 100, .8);
}

.fixed {
position: fixed;
top: 1vw;
left: 1vw;
right: 1vw;
bottom: 1vw;
background: rgba(100, 100, 255, .8);
}
1
2
3
4
5
6ag环亚国际手机客户端
7
8
9
10
11
12
13
14
.container {
width:10vw;
height: 10vw;
background: rgba(255, 100, 100, .8);
}

.fixed {
position: fixed;
top: 1vw;
left: 1vw;
right: 1vw;
bottom: 1vw;
background: rgba(100, 100, 255, .8);
}
一探 position:fixed 失效的最终原因

通过上面的试验,在最新的 Blink 内核下,发现并不是所有能够生成层叠上下文的元素都会使得 position:fixed 失效,但也不止 transform 会使 position:fixed 失效。

所以,MDN 关于 position:fixed 的补充描述不够完善。下述 3 种方式目前都会使得 position:fixed 定位的基准元素改变(本文重点):

transform 属性值不为 none 的元素
perspective 值不为 none 的元素
在 will-change 中指定了任意 CSS 属性
不同内核的不同表现

完了吗?没有!我们再看看其他内核下的表现。
image

上面也谈到了,上述结论是在最新的 Chrome 浏览器下(Blink内核),经过测试发现,在 MAC 下的 Safari 浏览器(WebKit内核,Version 9.1.2 (11601.7.7))和 IE Trident/ 内核及 Edge 浏览器下,上述三种方式都不会改变 position: fixed 的表现!

所以,当遇到 position: fixed 定位基准元素改变的时候,需要具体问题具体分析,多尝试一下,根据需要兼容适配的浏览器作出调整,不能一概而论。

position:fixed 的其他问题

当然,position: fixed 在移动端实现头部、底部模块定位。或者是在 position: fixed 中使用了 input 也会存在一些问题,这个有很多文章都描述过并且存在很多解决方案,本文不讨论这块问题。

这方面的问题,可以看看这篇文章:移动端web页面使用position:fixed问题总结

最后

系列 CSS 文章汇总在我的 Github ,持续更新,欢迎点个 star 订阅收藏。

好了,本文到此结束,希望对你有帮助 🙂

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

如果有人让你推荐前端技术书,请让他看这个列表 ->《经典前端技术书籍》

发表评论

电子邮件地址不会被公开。 必填项已用*标注