在过去的两天中，该公司的一个姐姐问我：“当我在这里调试时，当地没有问题。如果我去手机时有问题，该怎么办？”没有问题的测试环境没有问题？我也想知道这一点。下图是复制的效果。这是用户的选择组件。单击按钮时，您可以选择用户选择用户。单击按钮时，掩码层不会覆盖全屏幕。
组件代码
我们知道，它在每日页面布局中非常普遍，并且在许多布局中发挥了关键作用。它的角色是：
该元素将指定其相对于屏幕视口的位置的位置。屏幕滚动时，元素的位置将不会更改。
但是，在某些特定情况下，位置元素：固定的元素不能与屏幕视口相关。
在MDN中有一个俗话来解释这些具体情况：
当元素的祖先或属性非属性时，容器从视图端口更改为祖先。
实际上，它无法在本地复制，但是该表格是由用户创建的。
例如，下面最简单的代码
它应该是全屏和消失的，上面的代码也将导致故障。那为什么会发生呢？
这涉及堆叠上下文，这是堆叠上下文的概念。解释上述问题分为两个步骤：
那么如何解决它？我已经开发了公共组成部分。您不能要求组件的父元素不使用它或这些属性？
是否可以直接插入POP -UP窗口？
React中提供了一种createPortal方法，该方法可以将子节点渲染为parent component之外存在的dom节点
因此，我们可以更改组件代码：
当然，这可以解决故障问题，因为在元素下，您可以使用替换。
还有其他一些问题，例如在移动终端上的头部和底部模块的定位。或在中国使用输入时会有一些问题。您可以阅读本文：使用位置：修复了移动网页上的问题摘要
借用了前端脂肪的鱼的第一张照片。上面是本文的所有内容。我希望本文对每个人都有帮助。您还可以参考我以前的文章，也可以在评论领域交换您的想法和经验。欢迎探索前端。
本文是第一个发掘平台，即源小马博客
原始：https：//juejin.cn/post/70986206666987039