不受控制的 position-fixed
2017-08-15 20:38
766 查看
本文为纯理论文章,没有 Demo,没有配图,可能会略微枯燥。
大家都知道,
但是,在许多特定的场合,指定了
> 当元素祖先的 transform 属性非 none 时,定位容器由视口改为该祖先。
What!还有这种操作?可能有部分同学还没 get 到上面这句话的意思,通俗的讲就是指定了
那么,为什么会发生这种情况呢?说好的相对视口(Viewport)定位呢?
这个问题,就牵涉到了 Stacking Context ,也就是堆叠上下文的概念了。解释上面的问题分为两步:
任何非 none 的 transform 值都会导致一个堆叠上下文(Stacking Context)和包含块(Containing Block)的创建。
由于堆叠上下文的创建,该元素会影响其子元素的固定定位。设置了
堆叠上下文(Stacking Context):堆叠上下文是 HTML 元素的三维概念,这些 HTML 元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的 z 轴上延伸,HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
概念比较抽象,简单理解,记住 生成了 Stacking Context 的元素会影响该元素的层叠关系与定位关系。
关于 生成了 Stacking Context 的元素会影响该元素的层叠关系 这一点,具体可以看看这篇文章 层叠顺序(stacking level)与堆栈上下文(stacking context)知多少?
而本文提到了生成了 Stacking Context 的元素会影响该元素定位关系 。按照上面的说法,堆叠上下文的创建,该元素会影响其子元素的固定定位。设置了
所有能够生成堆叠上下文的元素,都会使得其子元素的
4000
(本文重点)
So,如何触发一个元素形成
根元素 (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"的元素
换言之,所有设置了上面属性样式的元素,都有使其子元素的
这方面的问题,可以看看这篇文章:移动端web页面使用position:fixed问题总结
好了,本文到此结束,希望对你有帮助 :)
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
大家都知道,
position:fixed在日常的页面布局中非常常用,在许多布局中起到了关键的作用。它的作用是:
position:fixed的元素将相对于屏幕视口(viewport)的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。
但是,在许多特定的场合,指定了
position:fixed的元素却无法相对于屏幕视口进行定位。这是为何呢?
失效的 position:fixed
在许多情况下,position:fixed将会失效。MDN 用一句话概括了这种情况:
> 当元素祖先的 transform 属性非 none 时,定位容器由视口改为该祖先。
What!还有这种操作?可能有部分同学还没 get 到上面这句话的意思,通俗的讲就是指定了
position:fixed的元素,如果其祖先元素存在非 none 的 transform 值 ,那么该元素将相对于设定了
transform的祖先元素进行定位。
那么,为什么会发生这种情况呢?说好的相对视口(Viewport)定位呢?
这个问题,就牵涉到了 Stacking Context ,也就是堆叠上下文的概念了。解释上面的问题分为两步:
任何非 none 的 transform 值都会导致一个堆叠上下文(Stacking Context)和包含块(Containing Block)的创建。
由于堆叠上下文的创建,该元素会影响其子元素的固定定位。设置了
position:fixed的子元素将不会基于 viewport 定位,而是基于这个父元素。
Stacking Context -- 堆叠上下文
好的嘛,好的嘛,又冒出新的名词了,堆叠上下文(又译作层叠上下文),又是什么?堆叠上下文(Stacking Context):堆叠上下文是 HTML 元素的三维概念,这些 HTML 元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的 z 轴上延伸,HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
概念比较抽象,简单理解,记住 生成了 Stacking Context 的元素会影响该元素的层叠关系与定位关系。
关于 生成了 Stacking Context 的元素会影响该元素的层叠关系 这一点,具体可以看看这篇文章 层叠顺序(stacking level)与堆栈上下文(stacking context)知多少?
而本文提到了生成了 Stacking Context 的元素会影响该元素定位关系 。按照上面的说法,堆叠上下文的创建,该元素会影响其子元素的固定定位。设置了
position:fixed的子元素将不会基于 viewport 定位,而是基于这个父元素。
position:fixed 失效的最终原因
所以,MDN 关于position:fixed的补充描述不够完善。
position:fixed不仅仅只是在元素祖先的 transform 属性非 none 时失效,而是:
所有能够生成堆叠上下文的元素,都会使得其子元素的
position:fixed相对它,而不是相对视口(Viewport)进行定位。
4000
(本文重点)
创建堆叠上下文的方式
上面都这么说了,想必让一个元素形成堆叠上下文的方式有很多种 。
So,如何触发一个元素形成
堆叠上下文?方法如下:
根元素 (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"的元素
换言之,所有设置了上面属性样式的元素,都有使其子元素的
position: fixed失效的能力。
position:fixed 的其他问题
当然,position: fixed在移动端实现头部、底部模块定位。或者是在
position: fixed中使用了 input 也会存在一些问题,这个有很多文章都描述过并且存在很多解决方案,本文不讨论这块问题。
这方面的问题,可以看看这篇文章:移动端web页面使用position:fixed问题总结
最后
系列 CSS 文章汇总在我的 Github ,持续更新,欢迎点个 star 订阅收藏。好了,本文到此结束,希望对你有帮助 :)
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
相关文章推荐
- 不受控制的 position:fixed
- 不受控制的 position:fixed
- [转帖]table-layout:fixed导致单元格宽度不受控制的问题
- 元素设置position:fixed后怎样控制下面内容的位置
- css中position属性(absolute|relative|static|fixed)详解
- CSS定位问题--position--static\absolute\relative\fixed
- ie8 不支持 position:fixed 的简单解决办法
- parquet.hadoop 狂打日志,不受控制
- position:fixed定位时 “高度坍塌” 问题的解决
- Position属性四个值:static、fixed、absolute和relative的区别和用法
- css控制背景图片位置-background-position
- 自定义Toas工具类t(二),LayoutInflater加载的布局大小不受控制的解决办法
- 修复ie6-position:fixed
- iframe子页面position的fixed
- css 兼容 position:fixed
- js,css三种方法解决IE6下position:fixed的Bug以及闪动问题
- 安卓,ios,微信html5,position:fixed无效,会动。
- CSS Position Fixed for IE6
- 元素设置position:fixed属性后IE下宽度无法100%延伸
- position:fixed与可scroll的列表,跳转之后再返回底部div先浮在上面,再恢复正常