详解CSS不受控制的position fixed

失效的 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;
  });
})();

我们设置两个父子 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的资料请关注我们其它相关文章!

(0)

相关推荐

  • 推荐深入理解css中的position定位和z-index属性

    作者:Cutsin 原文地址:http://www.moonless.net/blog/2007/09/csspositionz-index.html 注:本文仅供交流使用,如有不当之处欢迎批评指正,但请注明详由,谢谢! 由于平时不太用到,所以过去写css的时候对于position属性的absolute.relative值理解比较模糊,对于z-index的层叠更是摸不着头脑,除了理解的因素外,各个浏览器的不同解析结果也是一个大问题.今天仔细阅读了一下css文档,总算是对盒模型的浮动.定位有了比较

  • 详细分析css float 属性以及position:absolute 的区别

    1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块级元素,会单独占据一行. 先看看最基本的块级元素如何排列的.html代码,以下样式都是基于此. 复制代码 代码如下: <div class="boxBg">        <div class="box1">        框框1       

  • css position: absolute、relative详解

    CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠.此时对象不具有外补丁( margin ),但仍有内补丁( padding )和边框( border ). 要激活对象的绝对(absolute)定位,必须指定 left , right , top , bottom 属性中的至少一个,并且设置此属性值为 ab

  • 通过设置CSS中的position属性来固定层的位置

    定义和用法 position 属性规定元素的定位类型. 说明 这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. 默认值: static 继承性: no 版本: CSS2 JavaScript 语法: object.style.position="absolute" 实例 定位 h2 元素: h2 { position:absolute; left:100px; t

  • 浅谈由position属性引申的css进阶讨论

    1.normal flow normal flow(正常流):正常流是默认的定位方式.任何没有具体指定{position:absolute}或者{position:fixed}属性以及没有被浮动的元素都将默认获得此属性. 在这种方式里,块级元素在它们的包含块里一个一个垂直延伸,行内元素在它们的包含块里从左至右的水平排布. 值得注意的是,在正常流里垂直边距(vertical margin)是重叠的.也就是说,上下两个块级盒之间的边距由它们之中边距较大的元素决定,而不是他们的和! <style>

  • 使用CSS样式position:fixed水平滚动的方法

    使用CSS样式"position:fixed"可以使div块固定在一个固定位置,即使有滚动条也不会改变其位置.position:fixed给很多开发者带来了惊艳的效果,然而当出现水平滚动条时,效果就不那么容易接受了.有时候我们希望当出现水平滚动条时,div块可以随滚动条左右移动,实现垂直固定定位(fixed),水平相对定位(absolute).本文提供一个解决方法,附jquery扩展源码. 本文的实现方式是使用js来控制div块随滚动条水平滚动,原理就是当window对象发生scrol

  • CSS中position属性之fixed实现div居中

    position 属性规定元素的定位类型.这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. 上下左右 居中 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; height:150px; } 如果只需要左右居中,那么把 bottom:0; 或者 top:0; 删掉即

  • 详解CSS不受控制的position fixed

    失效的 position:fixed 在许多情况下,position:fixed将会失效.MDN用一句话概括了这种情况: 当元素祖先的 transform 属性非 none 时,定位容器由视口改为该祖先. What!还有这种操作?可能有部分同学还没 get 到上面这句话的意思,通俗的讲就是指定了position:fixed的元素,如果其祖先元素存在非 none 的 transform 值 ,那么该元素将相对于设定了transform的祖先元素进行定位. 那么,为什么会发生这种情况呢?说好的相对视

  • 详解IE6中的position:fixed问题与随滚动条滚动的效果

    详解IE6中的position:fixed问题与随滚动条滚动的效果 前言: 在<[jQuery]兼容IE6的滚动监听>(点击打开链接)提及到解决IE6fixed问题,具体是要引入一个js文件,还要声明一条脚本就为这个div声明fixed定位去解决,起始这样很不好啊.引入的Javascript不好管理之余,还要在head声明引入javascript,之后又要给这个div声明一个id,之后又要在脚本出弄一条声明,实在是烦死了. 使用position:fixed无非是想做出如下的效果. 基本上pos

  • jQuery position() 函数详解以及jQuery中position函数的应用

    position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移,也就是相对于被定位的祖辈元素的坐标.该函数只对可见元素有效. 所谓"被定位的元素",就是元素的CSS position属性值为absolute.relative或fixed(只要不是默认的static即可). 该函数返回一个坐标对象,该对象有一个left属性和top属性.属性值均为数字,它们都以像素(px)为单位. 与offset()不同的是:position()返回的是相对于被定位的祖辈元素的坐标,offse

  • 详解CSS开发过程中的20个快速提升技巧

    1.使用CSS重置(reset) css重置库如normalize.css已经被使用很多年了,它们可以为你的网站样式提供一个比较清晰的标准,来确保跨浏览器之间的一致性. 大多数项目并不需要这些库包含的所有规则,可以通过一条简单的规则来应用于布局中的所有元素,删除所有的margin.padding改变浏览器默认的盒模型. *{box-sizing:border-box;margin:0;padding:0} 使用box-sizing声明是可选择,如果你使用下面继承的盒模型形式可以跳过它. 2.继承

  • 详解CSS不定宽溢出文本适配滚动

    hover 时弹出框提示 一种可行的方案是在 hover 的时候,弹出一个文本框展示全文,最简单的就是在文本标签下添加 title 属性,填充我们需要的内容: <ul> <li title="溢出文本1 溢出文本2 溢出文本3 溢出文本4">溢出文本1 溢出文本2 溢出文本3 溢出文本4</li> </ul> 当然,这种方法简单但是可能缺乏点用户体验. 本文将简单介绍在文本长度不确定,容器长度也不确定的情况下,任意长度的文本实现 hove

  • 详解CSS故障艺术

    概述 本文的主题是 Glitch Art,故障艺术. 什么是故障艺术?我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式.它有一种魔幻的感觉,看起来具有闪烁.震动的效果,很吸引人眼球. 故障艺术它模拟了画面信号出现故障导致成像错误的感觉.青色色块与红色色块无法重合就是这种故障的体现.从胶片时代开始到今天的数码时代,这种故障一直是观众非常熟悉的现象.即使抖音的 LOGO 只是静态的,大脑也会自己补完整个效果,甚至还会自己脑补信号干扰的噪音. 使用混合模式实现抖音 LOGO 首先从静态的开始,

  • 详解CSS伪元素的妙用单标签之美

    :before和::before的区别 在介绍具体用法之前,简单介绍下伪类和伪元素.伪类大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的. 有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类和伪元素,大多数浏览器都支持这两种表示方式. #id:after{ ... } #id::after{ ... } 单冒号(:)用于 CSS3 伪类,双冒号(::)用于 CSS3 伪元素.对于 CSS2 中已

  • 详解CSS样式中的!important、*、_符号

    详解CSS样式中的!important.*._符号 !important.*._其实没什么用,皆是用来设置样式的优先级,但是样式的优先级你可以自行排好其先后位置来设置,然而你还是要看懂的. 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < 元素style中的属性,但是如果使用!important,事情就会变得不一样. 首先,先看下面一段代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv

  • 详解CSS玩转图片Base64编码

    什么是 base64 编码? 我不是来讲概念的,直接切入正题,图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址. 这样做有什么意义呢?我们知道,我们所看到的网页上的每一个图片,都是需要消耗一个 http 请求下载而来的(所有才有了 csssprites 技术的应运而生,但是 csssprites 有自身的局限性,下文会提到). 没错,不管如何,图片的下载始终都要向服务器发出请求,要是图片的下载不用向服务器发出请求,而可以随着 HTML 的下载同时下载到本

  • js实现弹出框的拖拽效果实例代码详解

    具体代码如下所示: //HTML部分 <div class="wrap"></div> <div class="popUpBox"> <div class="layer-head"><div class="layer-head-text">弹出框</div><div class="layer-close"></div&

随机推荐