相对于视口定位嵌套的 div答案

【问题标题】：Position a nested div relative to viewport相对于视口定位嵌套的 div
【发布时间】：2022-01-16 23:15:07
【问题描述】：

我正在构建一个元素（反应中的组件），它可以包含一个子组件/元素。元素上定义了一些样式。该元素应该具有这样的样式，它允许子元素定位在屏幕上的任何位置（即，相对于视口）。但是，有 2 个问题，

我无法使用position: absolute 将自定义元素的高度和宽度设置为 100%，因为此元素后面有一个元素需要可见和可点击（我的第一种方法是在自定义元素上设置 opacity:0元素，以便后面的元素可见，但这不会使其可点击）。
子元素是有条件地安装/卸载的，因此在此过程中滚动条是可见的，并且在安装/卸载完成后它会消失，从而导致 UI 不太好。

让我们调用自定义元素ABC。 HTML 结构如下所示：

<ABC props>
  <div><p>Child element</p></div> //This could be anything for the matter of fact.
</ABC>

ABC 组件的 CSS：

    position: absolute;
    z-index: 25;
    top:0;
    margin: 0 auto;
    border: 5px solid blue;
    transform: translateY(15px);
    transition: opacity 1s ease,transform 1s ease;

在上述情况下，我希望能够将样式应用于子 div 元素，以便它可以相对于视口定位在任何位置，并占据指定的任何大小。我确实尝试将position: fixed 与其他组合一起使用，但似乎没有一个可以解决问题。

感谢任何输入。谢谢。

【问题讨论】：

你能解释一下在使用 position:fixed 时什么不起作用吗？这是为您的用例设计的

标签： html css reactjs

【解决方案1】：

您可以：

拥有一个 100% 视口高度/宽度的容器，并在其上禁用与 pointer-events 和 touch-events 的鼠标交互（并在子元素上重新启用它们）
在top/left 位置属性上使用position:fixed 和vh/vw 单位

参考资料：

【讨论】：

谢谢，按预期工作。出于好奇，有没有其他方法可以在不重新启用子元素上的pointer-events 的情况下完成相同的操作？
按照设计，所有道具都在 CSS 中继承，所以我会说不，你必须在适合你需要的地方手动重新启用它。