Published on

前端妹子问我 position fixed 失效问题该如何解决?

Authors
  • avatar
    作者
    狂奔滴小马

背景

这两天公司一位妹子问我,“我这边调试的时候本地显示没问题,到手机端就有问题,该怎么办呢?” 测试环境没问题到线上就有问题了?对此我也很纳闷。 下图是复现的效果图, 这个是一个用户选择组件,当点击按钮的时候,弹窗框可以选择用户,当点击按钮后蒙层并没有覆盖全屏。 选择用户按钮

点击按钮后

问题分析

组件代码

import React, { useState } from 'react'

export default function App({ children }) {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <span onClick={() => setVisivle(true)}>{children}</span>
      {visible ? <div className="fixed">...</div> : null}
    </>
  )
}

我们知道,position:fixed 在日常的页面布局中非常常用,在许多布局中起到了关键的作用。它的作用是:

position:fixed 的元素将相对于屏幕视口(viewport)的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。

但是在某些特定场景下,指定了 position:fixed 的元素却无法相对于屏幕视口进行定位。

MDN 中有句话对这些特定场景做了解释:

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

其实并不是本地不能复现,只不过这个表单是用户创建的,只有当该选择组件在 Tab 组件内部的时候 100% 复现。 在上面代码中,就是因为在 Tab 中使用了 transform:translate3d(0, 0, 0) 属性,所以会在该场景下失效。

失效的 position:fixed

比如下面一个最简单的代码

<div id="app">
  <div class="fixed"></dix>
</div>
#app {
  width: 100px;
  height: 100px;
  transform: scale(1);
}
.fixed {
  position: fixed;
  background: blue;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

失效的 position:fixed

本来应该全屏的div,消失了,上述代码中 transform: scale(1);也会导致 position:fixed 失效,那么,为什么会发生这种情况呢?

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

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

  2. 由于堆叠上下文的创建,该元素会影响其子元素的固定定位。设置了 position:fixed 的子元素将不会基于 viewport 定位,而是基于这个父元素。

解决办法

那么要如何解决呢? 我开发的是一个公共组件,总不能要求使用组件的父元素都不使用 transform, perspectivefilter 这些属性吧?

是不是直接将弹窗插入到 body 下就可以了呢?

在 React 中提供了 createPortal 方法, 该方法可以将子节点渲染到存在于父组件以外的 DOM 节点中

所以我们可以改一下组件代码:

import React, { useState, useRef, useEffect } from "react";
import { createPortal } from "react-dom";

export default function App({ children }) {
  const [visivle, setVisivle] = useState(false);

  const node = useRef();

  useEffect(() => {
    node.current = document.createElement("div");

    document.body.appendChild(node.current);
    return () => {
      if (node.current) {
        node.current.remove();
      }
    };
  }, []);
  return (
    <>
      <span onClick={() => setVisivle(true)}>{children}</span>
      {visivle && node.current
        ? createPortal(<div className="fixed">...</div>,node.current)
        : null}
    </>
  );
}

这样就可以解决 position:fixed 失效的问题,当然,因为在 body元素下,可以使用 position:absolute 代替 。

position:fixed 的其他问题

position: fixed 还有一些其他问题,比如在在移动端实现头部、底部模块定位。或者是在 position: fixed 中使用了 input 也会存在一些问题,可以看下这篇文章:移动端 web 页面使用 position:fixed 问题总结

借用了前端胖头鱼的首图。 以上就是本文全部内容,希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端。

runjs-cool
关注微信公众号,获取最新原创文章(首发)View on GitHub