不受控制的 position:fixed
本文为纯理论文章,没有 Demo,没有配图,可能会略微枯燥。
大家都知道,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)进行定位。(本文重点)
创建堆叠上下文的方式
上面都这么说了,想必让一个元素形成 堆叠上下文
的方式有很多种 。
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的更多相关文章
- CSS:position:fixed使用(转)
position属性规定元素的定位类型,即建立元素布局所用的定位机制.任何元素都可以定位,不过绝对定位或固定定位元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认 ...
- position:fixed和scroll实现div浮动【示例】
前言 在自己建站的过程中,要实现一个div随滚动条浮动的效果,网上找了些示例不太好用,还是自己动手,丰衣足食,写的不好请大家谅解,毕竟我不是搞前端的,因为自己建站毕竟每一步都必须自己来,这边只是做个记 ...
- 修正IE6不支持position:fixed的bug(转)
众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著.前些天我做自己的博客模板的时候,遇到了这个问题.当时就简单的无视了IE6— ...
- position:fixed失效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 解决IE6不支持position:fixed的bug
/*完整代码 */ /* 除IE6浏览器的通用方法 */ .ie6fixedTL { position: fixed; left:; top:; } .ie6fixedBR { position: f ...
- 解决 scroll() position:fixed 抖动、导航菜单固定头部(底部)跟随屏幕滚动
一.导航栏或者页脚正常情况下固定在页面的相应位置,当页面滚动后,导航栏或者页脚固定在页面的顶部或者底部的情景 一般就是将该块的代码样式的position设置为fixed.固定在顶部的话,将top设置为 ...
- 通过定位position="fixed"实现网页内容的固定层效果
在网页的顶部或者底部导航栏中经常需要使用到固定层的效果,即紧挨浏览器窗口的顶部或底部而网页其他内容的影响. 一.实现 主要通过设置导航栏元素的位置属性position="fixed" ...
- 完美解决IE6不支持position:fixed的bug
示例代码: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" cont ...
- 元素设置position:fixed属性后IE下宽度无法100%延伸
元素设置position:fixed属性后IE下宽度无法100%延伸 IE bug 出现条件: 1.div1设置position:fixed属性,并且想要width:100%的效果. 2.div2(下 ...
随机推荐
- [leetcode-575-Distribute Candies]
Given an integer array with even length, where different numbers in this array represent different k ...
- 【LeetCode】87. Scramble String
题目: Given a string s1, we may represent it as a binary tree by partitioning it to two non-empty subs ...
- JAVA基础——方法笔记
java方法_学习笔记 由于我本人对java方法已经比较熟悉了,java方法的定义和使用也比较简单,这里只列举了基于我自身容易搞错的地方,希望对大家的学习有帮助!! 方法的参数可以是基本数据类型,如 ...
- python3中socket套接字的编码问题解决
一.TCP 1.tcp服务器创建 #创建服务器 from socket import * from time import ctime #导入ctime HOST = '' #任意主机 PORT = ...
- 移动端布局,C3新增属性
<html5拖拽> 1.给元素设置 draggable="true" 属性,这个元素就可以被拖拽了 <拖拽元素事件> 2.ondragstart 拖拽前触发 ...
- 3.jsp基本语法笔记
1.page标签 <%@ page language="java" import="java.util.*" contentType="text ...
- 读书共享 Primer Plus C-part 7
第十章 数组和指针 1.关于二维数组跟指针 #include<stdio.h> int main() { ][]={{,,,},{,,,},{,,,}}; ; ;i< ;i++) ...
- 解决win10系统以太网适配器的驱动程序可能出现问题
插上网线显示未连接-连接可用,连上无线显示未连接-连接不可用,右下角显示感叹号 ,以太网和无线属性显示ipv4未连接详细信息为空,在设备管理器里卸载网卡驱动重装上仍然没有,通过windoes自带的网络 ...
- 跨域访问http接口的使用
最近在弄一个sip网页集成版软电话,为了功能的完善,呼叫中心的工作人员为我们提供了一个http接口,我先在网页中直接打开分析了一下他的返回值,然后又放到js中去访问,结果一放到js中一访问就发现浏览器 ...
- 浅谈Notepad++选中行操作+快捷键+使用技巧【超详解】
Notepad++选中行操作 快捷键 使用技巧 用Notepad++写代码,要是有一些重复的代码想copy一下,还真不容易,又得动用鼠标,巨烦人.... 有木有简单的方法呢,确实还是有的不过也不算太好 ...