CSS那些破B事儿系列之position:fixed定位失效

·  阅读 1801

闲言:自己css水平不够导致前段时间碰到position:fixed定位失效的问题,麻蛋,fixed定位不是一直都是相对于屏幕视口(viewport)的位置来指定fixed属性元素的位置么?哎,碰到这种问题只能说自己太菜了,于是各种翻资料,看看fixed到底基于什么定位,于是就有了下面这些拗心的解释!!!

首先看下MDN上是怎么说的:

fixed

不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时,容器由视口改为该祖先。

What?

好吧,我承认这部分MDN看的实在是少,工作最初就接触html、css,遵循着老路就走下来了,这里有两个我之前不知道的概念,层叠上下文元素祖先的 transform 属性非 none,看到MDN的解释就是要fixed定位的元素如果其所在DOM结构的父元素或者祖先元素出现transform 属性非 none 时fixed相对的位置会由基于屏幕视口(viewport)变为基于其父元素或者祖先元素。好坑啊!!!

引用个例子来说明一下:

<style>
  .transformEle {
    width: 400px;
    height: 400px;
    transform: translateY(200px);
    background: #00D287;
  }
  .fixedEle {
    position: fixed;
    bottom: 0; 
    width: 50px;
    height: 50px;
    background: #FF3131;
  }
</style>
<div class=transformEle>
    <div class=fixedEle>
    </div>
</div>
复制代码

如果transformEle使用了transform,而fixedEle使用了position: fixed,那么position: fixed不会有固定在visual viewport上,实际结果相当于相对transformEle元素定位,就是fixed相对的不是visual viewport,而是transformELe, 产生这样的原因主要是因为transformposition: fixed使用了不同的坐标系统。

  • 层叠上下文 这个有时间再继续写一下。
分类:
前端
标签:
分类:
前端
标签: