详解CSS不受控制的position fixed


Posted in HTML / CSS onMay 25, 2021

失效的 position:fixed

在许多情况下,position:fixed将会失效。MDN用一句话概括了这种情况:

当元素祖先的 transform 属性非 none 时,定位容器由视口改为该祖先。

What!还有这种操作?可能有部分同学还没 get 到上面这句话的意思,通俗的讲就是指定了position:fixed的元素,如果其祖先元素存在非 none 的 transform 值 ,那么该元素将相对于设定了transform的祖先元素进行定位。

那么,为什么会发生这种情况呢?说好的相对视口(Viewport)定位呢?

这个问题,就牵涉到了 Stacking Context ,也就是堆叠上下文的概念了。解释上面的问题分为两步:

1.任何非 none 的 transform 值都会导致一个堆叠上下文(Stacking Context)和包含块(Containing Block)的创建。

2.由于堆叠上下文的创建,该元素会影响其子元素的固定定位。设置了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相对它,而不是相对视口(Viewport)进行定位呢?

创建堆叠上下文的方式

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

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

1.根元素 (HTML),

2.z-index 值不为 "auto"的 绝对/相对定位,

3.一个 z-index 值不为 "auto"的 flex 项目 (flex item),即:父元素 display: flex|inline-flex,

4.opacity 属性值小于 1 的元素(参考 the specification for opacity),

5.transform 属性值不为 "none"的元素,

6.mix-blend-mode 属性值不为 "normal"的元素,

7.filter值不为“none”的元素,

8.perspective值不为“none”的元素,

9.isolation 属性被设置为 "isolate"的元素,

10.position: fixed

11.在 will-change 中指定了任意 CSS 属性,即便你没有直接指定这些属性的值

12.-webkit-overflow-scrolling 属性被设置 "touch"的元素

接下来,我们要验证,是否所有设置了上面属性样式之一的元素,都有使其子元素的position: fixed失效的能力?

为此我做了下面一个小实验,基于最新的 Blink 内核。可戳:

层叠上下文对 fixed 定位的影响(不同浏览器下表现可能不一样)

h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    height: 10vh;
    line-height: 10vh;
    color: #333;
    font-size: 1.5vw;
}

select {
    height: 10vh;
    line-height: 10vh;
    font-size: 1vw;
    outline: none;
    border: 1px solid #333;
}

.container {
    width:10vw;
    height: 10vw;
    // transform: translate3d(5vw, 5vw, 0);
    // will-change: transform;
    background: rgba(255, 100, 100, .8);
}

.fixed {
    position: fixed;
    top: 1vw;
    left: 1vw;
    right: 1vw;
    bottom: 1vw;
    background: rgba(100, 100, 255, .8);
}

.g-absolute {
    position: absolute;
    z-index: 10;
}

.g-flex {
    display: flex;
    z-index: 10;
}

.g-opacity {
    opacity: .5;
}

.g-transform {
    transform: translate3d(0, 0, 0);
    // transform: scale(1);
}

.g-blend {
    mix-blend-mode: screen;
}

.g-filter {
    filter: blur(5px);
}

.g-perspective {
    perspective: 1000px;
}

.g-isolation{
    isolation: isolate;
}

.g-fixed {
    position: fixed;
}

.g-willChange {
    will-change: transform;
}

.g-scrolling {
    -webkit-overflow-scrolling: touch;
}

.g-backface {
    backface-visibility: hidden;
}

.g-preserve3d {
    transform-style: preserve-3d;
}

.g-contain {
    contain: paint;
}
<div class="container"> 
  <div class="fixed"> </div>
</div>
(function () {
  let old = "";
  let dom = $(".container");

  $('#select').on("change", function (e) {
    let current = $(this).val();
    dom.removeClass(old).addClass(current);
    old = current;
  });
})();

详解CSS不受控制的position fixed

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

<div class="container">
  <div class="fixed"> </div>
</div>

最初的 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);
}

一探position:fixed失效的最终原因

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

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

1.transform属性值不为 none 的元素

2.perspective值不为 none 的元素

3.在will-change中指定了任意 CSS 属性

不同内核的不同表现

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

上面也谈到了,上述结论是在最新的 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 也会存在一些问题,这个有很多文章都描述过并且存在很多解决方案,本文不讨论这块问题。

以上就是详解CSS不受控制的position fixed的详细内容,更多关于CSS不受控制的position fixed的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
Jun 21 HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
手机端用rem+scss做适配的详解
Nov 15 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
详解px单位html5响应式方案
Mar 08 HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 HTML / CSS
CSS极坐标的实例代码
Jun 03 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 HTML / CSS
详解CSS伪元素的妙用单标签之美
浅谈由position属性引申的css进阶讨论
详解CSS玩转图片Base64编码
详解CSS不定宽溢出文本适配滚动
May 24 #HTML / CSS
如何在CSS中绘制曲线图形及展示动画
详解盒子端CSS动画性能提升
css背景和边框标签实例详解
You might like
用PHP连接Oracle数据库
2006/10/09 PHP
php下使用strpos需要注意 === 运算符
2010/07/17 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
一个基于flask的web应用诞生(1)
2017/04/11 Python
详解python基础之while循环及if判断
2017/08/24 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
python 读取、写入txt文件的示例
2020/09/27 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
美国著名的团购网站:Woot
2016/08/02 全球购物
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
大学生求职简历的自我评价范文
2013/10/12 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
详解pytorch创建tensor函数
2022/03/22 Python
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL